<!doctype html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
    <title>Flow-UI 文档</title>
    <meta content="Flow-CLI,front-flow" name="Keywords">
    <meta content="Flow-CLI是专为front-flow前端工作流开发的命令行工具，实现自动初始化、组件化开发、预处理、静态资源优化、图片压缩等前端自动化需求。" name="Description">
    <link href="/Flow-UI/docs/favicon.ico" rel="icon">
<link href="/Flow-UI/docs/css/style.css" rel="stylesheet">
<link href="/Flow-UI/docs/css/doc.css" rel="stylesheet">
<link href="/Flow-UI/docs/lib/highlight/styles/github.css" rel="stylesheet">
<script type="text/javascript">
	if(window.location.href.indexOf('https')===0){
		document.write('<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />');
	}
</script>
<!--[if lt IE 9]><script src="/Flow-UI/docs/lib/H5shiv.js"></script><![endif]-->
</head>

<body class="hasNav">
    <header><h1>Flow-UI 说明文档</h1></header>
    <nav class="wrap nav" id="nav">导航生成中...</nav>
    <section class="wrap" id="overall">
        <h2>概述</h2>
        <h3 id="overall-intro">关于</h3>
        <p> Flow-UI是一套轻量级的前端UI框架，基于<a href="http://seajs.org/docs/" target="_blank">Seajs</a> 实现js模块化开发，内置多种业务场景解决方案。</p>
        <h4>兼容性</h4>
        <p>IE8+</p>
        <h4>目录结构</h4>
        <pre>
            <code class="javascript"> 
  |-- flow-ui/                  //模板项目
  |    |-- css/                     //css文件
  |    |-- font/                    //字体文件
  |    |-- img/                     //图片文件
  |    |-- js/                      //js文件
  |    |-- lib/                     //模块库以外的js文件
  |    |-- index.html               //索引页
  |    |-- blank.html               //空白页
  |    |-- demo.html                //UI演示页
  |    |-- fullpage.html            //滚屏场景示例
  |    |-- pjax-page-1/2.html       //PJAX场景示例
  |    |-- seajs.config.js          //站点配置文件
  |    `-- favicon.ico 
  ·-- modules/                  //seajs模块库（可选）
  
                </code>
          </pre>
        <h3 id="getStart">使用</h3>
        <h4 id="download">下载</h4>
        <p>Github下载：<a href="https://github.com/tower1229/Flow-UI" target="_blank">Flow-UI</a></p>
        <p>自动化工具：<a href="https://github.com/tower1229/Flow-CLI" target="_blank">Flow-CLI</a></p>
        <h4>快速开始</h4>
        <p>1. 拷贝<code>flow-ui/</code>和<code>modules/</code>到项目中；</p>
        <p>2. 根据需要修改配置，<code>seajs.config.js</code>包含框架所需的所有配置；</p>
        <p>3. 启动本地服务，访问 <a href="http://localhost/flow-ui/index.html" target="_blank">http://localhost/flow-ui/index.html</a></p>
        <h4>配置</h4>
        <table class="table table-hover">
            <tr>
                <td>
                    seajs.root
                </td>
                <td>
                    模块化js加载起始路径，如果站点存在于二级目录需要设置此项。
                </td>
            </tr>
            <tr>
                <td>
                    seajs.set
                </td>
                <td>
                    模块设置或自定义功能设置。
                </td>
            </tr>
            <tr>
                <td>
                    seajs.config.base
                </td>
                <td>
                    模块化文件存放路径，默认<code>seajs.root + "/modules"</code>，也可以配置其他位置或远程位置。
                </td>
            </tr>
            <tr>
                <td>
                    seajs.config.paths
                </td>
                <td>
                    路径短语，默认配置了<code>js</code>文件夹和<code>lib</code>文件夹。
                </td>
            </tr>
            <tr>
                <td>
                    seajs.config.alias
                </td>
                <td>
                    模块短命名。
                </td>
            </tr>
            <tr>
                <td>
                    seajs.localcache.timeout
                </td>
                <td>
                    本地缓存方案加载超时时间，单位ms，默认<code>2e4</code>
                </td>
            </tr>
        </table>
    </section>
    <section class="wrap" id="css">
        <h2>CSS</h2>
        <h3 id="css-demo">演示</h3>
        <h4>栅格系统</h4>
        <div class="row m-b">
            <div class="span-1">
                <div class="p bg-info">.span-1</div>
            </div>
            <div class="span-1">
                <div class="p bg-info">.span-1</div>
            </div>
            <div class="span-1">
                <div class="p bg-info">.span-1</div>
            </div>
            <div class="span-1">
                <div class="p bg-info">.span-1</div>
            </div>
            <div class="span-1">
                <div class="p bg-info">.span-1</div>
            </div>
            <div class="span-1">
                <div class="p bg-info">.span-1</div>
            </div>
            <div class="span-1">
                <div class="p bg-info">.span-1</div>
            </div>
            <div class="span-1">
                <div class="p bg-info">.span-1</div>
            </div>
            <div class="span-1">
                <div class="p bg-info">.span-1</div>
            </div>
            <div class="span-1">
                <div class="p bg-info">.span-1</div>
            </div>
            <div class="span-1">
                <div class="p bg-info">.span-1</div>
            </div>
            <div class="span-1">
                <div class="p bg-info">.span-1</div>
            </div>
        </div>
        <div class="row m-b">
            <div class="span-8">
                <div class="p bg-info">.span-8</div>
            </div>
            <div class="span-4">
                <div class="p bg-info">.span-4</div>
            </div>
        </div>
        <div class="row m-b">
            <div class="span-4">
                <div class="p bg-info">.span-4</div>
            </div>
            <div class="span-4">
                <div class="p bg-info">.span-4</div>
            </div>
            <div class="span-4">
                <div class="p bg-info">.span-4</div>
            </div>
        </div>
        <div class="row m-b">
            <div class="span-6">
                <div class="p bg-info">.span-6</div>
            </div>
            <div class="span-6">
                <div class="p bg-info">.span-6</div>
            </div>
        </div>
        <div class="full-row m-b">
            <div class="span-6">
                <div class="p bg-primary">.full-row .span-6</div>
            </div>
            <div class="span-6">
                <div class="p bg-success">.full-row .span-6</div>
            </div>
        </div>
        <h4>按钮</h4>
        <div class="m-b">
            <button type="button" class="btn btn-lg btn-default">default</button>
            <button type="button" class="btn btn-lg btn-primary">primary</button>
            <button type="button" class="btn btn-lg btn-info">info</button>
            <button type="button" class="btn btn-lg btn-success">success</button>
            <button type="button" class="btn btn-lg btn-warning">warning</button>
            <button type="button" class="btn btn-lg btn-danger">danger</button>
        </div>
        <div class="m-b">
            <button type="button" class="btn btn-default">default</button>
            <button type="button" class="btn btn-primary">primary</button>
            <button type="button" class="btn btn-info">info</button>
            <button type="button" class="btn btn-success">success</button>
            <button type="button" class="btn btn-warning">warning</button>
            <button type="button" class="btn btn-danger">danger</button>
        </div>
        <div class="m-b">
            <button type="button" class="btn btn-sm btn-default">default</button>
            <button type="button" class="btn btn-sm btn-primary">primary</button>
            <button type="button" class="btn btn-sm btn-info">info</button>
            <button type="button" class="btn btn-sm btn-success">success</button>
            <button type="button" class="btn btn-sm btn-warning">warning</button>
            <button type="button" class="btn btn-sm btn-danger">danger</button>
        </div>
        <div class="m-b">
            <a href="#" class="btn btn-ghost btn-lg btn-default">default</a>
            <a href="#" class="btn btn-ghost btn-lg btn-primary">primary</a>
            <a href="#" class="btn btn-ghost btn-lg btn-info">info</a>
            <a href="#" class="btn btn-ghost btn-lg btn-success">success</a>
            <a href="#" class="btn btn-ghost btn-lg btn-warning">warning</a>
            <a href="#" class="btn btn-ghost btn-lg btn-danger">danger</a>
        </div>
        <div class="m-b">
            <a href="#" class="btn btn-ghost btn-default">default</a>
            <a href="#" class="btn btn-ghost btn-primary">primary</a>
            <a href="#" class="btn btn-ghost btn-info">info</a>
            <a href="#" class="btn btn-ghost btn-success">success</a>
            <a href="#" class="btn btn-ghost btn-warning">warning</a>
            <a href="#" class="btn btn-ghost btn-danger">danger</a>
        </div>
        <div class="m-b">
            <a href="#" class="btn btn-ghost btn-sm btn-default">default</a>
            <a href="#" class="btn btn-ghost btn-sm btn-primary">primary</a>
            <a href="#" class="btn btn-ghost btn-sm btn-info">info</a>
            <a href="#" class="btn btn-ghost btn-sm btn-success">success</a>
            <a href="#" class="btn btn-ghost btn-sm btn-warning">warning</a>
            <a href="#" class="btn btn-ghost btn-sm btn-danger">danger</a>
        </div>
        <div class="m-b">
            <a href="#" class="btn btn-link">链接按钮</a>
        </div>
        <h4>定义列表</h4>
        <dl class="dl dl-table">
            <dt>Description lists</dt>
            <dd>A description list is perfect for defining terms.</dd>
            <dt>Euismod</dt>
            <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
            <dd>Donec id elit non mi porta gravida at eget metus.</dd>
            <dt>Malesuada porta</dt>
            <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
            <dt>Felis euismod semper eget lacinia</dt>
            <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
        </dl>
        <h4>表格</h4>
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>标题</th>
                    <th>备注</th>
                </tr>
            </thead>
            <tr>
                <td>1</td>
                <td>内容</td>
                <td>内容</td>
            </tr>
            <tr>
                <td>2</td>
                <td>内容</td>
                <td>内容</td>
            </tr>
            <tr>
                <td>3</td>
                <td>内容</td>
                <td>内容</td>
            </tr>
        </table>
        <h4>色彩</h4>
        <div class="m-b">
            <p class="p text-primary">以你的风采</p>
            <p class="p text-success">以你的风采</p>
            <p class="p text-info">以你的风采</p>
            <p class="p text-warning">以你的风采</p>
            <p class="p text-danger">以你的风采</p>
        </div>
        <div class="m-b">
            <p class="p m-tb bg-primary">无聊的对话造就无聊的人生</p>
            <p class="p m-tb bg-success">无聊的对话造就无聊的人生</p>
            <p class="p m-tb bg-info">无聊的对话造就无聊的人生</p>
            <p class="p m-tb bg-warning">无聊的对话造就无聊的人生</p>
            <p class="p m-tb bg-danger">无聊的对话造就无聊的人生</p>
        </div>
        <h4>表单</h4>
        <h5>基本实例</h5>
        <form role="form m-b">
            <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
            <div class="form-group">
                <label for="exampleInputFile">File input</label>
                <input type="file" id="exampleInputFile">
                <p class="help-block">Example block-level help text here.</p>
            </div>
            <label class="checkbox">
                <input type="checkbox">Check me out
            </label>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <h5>内联表单</h5>
        <form class="form-inline m-b">
            <label class="sr-only" for="exampleInputEmail2">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
            <div class="input-group">
                <div class="input-group-addon">@</div>
                <input class="form-control" type="email" placeholder="Enter email">
            </div>
            <label class="sr-only" for="exampleInputPassword2">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
            <label class="checkbox">
                <input type="checkbox">Check me out
            </label>
            <button type="submit" class="btn btn-default">Sign in</button>
        </form>
        <h5>水平排列</h5>
        <form class="form-horizontal m-b" role="form">
            <div class="form-group row">
                <label for="inputEmail3" class="span-2 control-label">Email</label>
                <div class="span-10">
                    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                </div>
            </div>
            <div class="form-group row">
                <label for="inputPassword3" class="span-2 control-label">Password</label>
                <div class="span-10">
                    <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                </div>
            </div>
            <div class="form-group row">
                <div class="pull-right-2 span-10">
                    <label class="checkbox">
                        <input type="checkbox"> Remember me
                    </label>
                </div>
            </div>
            <div class="form-group">
                <div class="pull-right-2 span-10">
                    <button type="submit" class="btn btn-default">Sign in</button>
                </div>
            </div>
        </form>
        <h5>单选和多选</h5>
        <label class="checkbox">
            <input type="checkbox" value=""> Option one is this and that&mdash;be sure to include why it's great
        </label>
        <label class="checkbox disabled">
            <input type="checkbox" value="" disabled> Option two is disabled
        </label>
        <label class="radio">
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option one is this and that&mdash;be sure to include why it's great
        </label>
        <label class="radio">
            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something else and selecting it will deselect option one
        </label>
        <label class="radio disabled">
            <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> Option three is disabled
        </label>
        <h5>内联单选和多选</h5>
        <div class="m-b">
            <label class="checkbox checkbox-inline">
                <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
            </label>
            <label class="checkbox checkbox-inline">
                <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
            </label>
            <label class="checkbox checkbox-inline">
                <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
            </label>
        </div>
        <div class="m-b">
            <label class="radio radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
            </label>
            <label class="radio radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
            </label>
            <label class="radio radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
            </label>
        </div>
        <h5>特殊样式</h5>
        <form class="form-horizontal m-b">
            <div class="form-group form-group-sm row has-success has-feedback">
                <label class="control-label span-2" for="inputSuccess3">Input with success</label>
                <div class="span-10">
                    <input type="text" class="form-control" id="inputSuccess3" placeholder="小尺寸"> <i class="ion form-control-feedback" aria-hidden="true">&#xe6a9;</i>
                </div>
            </div>
            <div class="form-group row has-warning has-feedback">
                <label class="control-label span-2" for="inputSuccess3">Input with warning</label>
                <div class="span-10">
                    <input type="text" class="form-control" id="inputSuccess3" placeholder="普通尺寸"> <i class="ion form-control-feedback" aria-hidden="true">&#xe60a;</i>
                </div>
            </div>
            <div class="form-group form-group-lg row has-error has-feedback">
                <label class="control-label span-2" for="inputSuccess3">Input with error</label>
                <div class="span-10">
                    <input type="text" class="form-control" id="inputSuccess3" placeholder="大尺寸"> <i class="ion form-control-feedback" aria-hidden="true">&#xe6b0;</i>
                </div>
            </div>
            <div class="form-group row">
                <label class="control-label span-2" for="inputGroupSuccess2">带徽标控件<big class="form-mark">*</big></label>
                <div class="span-10">
                    <div class="input-group">
                        <span class="input-group-addon">@</span>
                        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
                    </div>
                </div>
            </div>
        </form>
        <h4>字体图标</h4> 内置图标使用
        <a href="http://www.iconfont.cn/" target="_blank">阿里巴巴矢量图标库</a>管理，详情访问<a href="http://zangtao.org/projects/icons/" target="_blank" class="btn btn-link">图标库</a>项目主页。
        <h4>标签</h4>
        <div class="label-list">
            <span class="label label-sm label-primary">标签-primary</span>
            <span class="label label-sm label-success">标签-success</span>
            <span class="label label-sm label-info">标签-info</span>
            <span class="label label-sm label-warning">标签-warning</span>
            <span class="label label-sm label-danger">标签-danger</span>
        </div>
        <div class="label-list">
            <span class="label label-primary">标签-primary</span>
            <span class="label label-success">标签-success</span>
            <span class="label label-info">标签-info</span>
            <span class="label label-warning">标签-warning</span>
            <span class="label label-danger">标签-danger</span>
        </div>
        <div class="label-list">
            <span class="label label-lg label-primary">标签-primary</span>
            <span class="label label-lg label-success">标签-success</span>
            <span class="label label-lg label-info">标签-info</span>
            <span class="label label-lg label-warning">标签-warning</span>
            <span class="label label-lg label-danger">标签-danger</span>
        </div>
        <h3 id="css-compile">编译</h3>
        <p>Flow-UI的项目代码是使用<a href="https://github.com/front-flow/Flow-CLI" target="_blank">Flow-CLI</a>，编译<a href="https://github.com/front-flow/front-flow-template" target="_blank">front-flow-template</a>而来。</p>
        <p>front-flow-template基于less实现UI组件化管理，并抽离出全站样式配置文件，可实现灵活的组件选配，出于演示目的Flow-UI打包了所有的UI组件，如<code>flex</code>和<code>responsive</code>属于只在特定场景应用的组件，在front-flow-template中是默认不引入的。</p>
        <p>若希望进一步自定义UI风格，可以参考<a href="https://github.com/front-flow/Flow-CLI" target="_blank">Flow-CLI</a>的详细介绍。</p>
        <h3 id="css-component">组件列表</h3>
        <nav class="modules_index" id="component_index"></nav>
        <h4>示例</h4>
        <table class="table table-bordered" id="component_list">
            <tr id="btn（按钮）">
                <td>btn.less</td>
                <td>
                    <table class="table table-hover">
                        <tr>
                            <td>.btn</td>
                            <td>
                                定义一个按钮
                            </td>
                        </tr>
                        <tr>
                            <td>.btn-default</td>
                            <td>
                                普通颜色
                            </td>
                        </tr>
                        <tr>
                            <td>.btn-primary</td>
                            <td>
                                主色调颜色
                            </td>
                        </tr>
                        <tr>
                            <td>.btn-auxiliary</td>
                            <td>
                                辅色调颜色
                            </td>
                        </tr>
                        <tr>
                            <td>.btn-info</td>
                            <td>
                                中性情景颜色
                            </td>
                        </tr>
                        <tr>
                            <td>.btn-success</td>
                            <td>
                                成功情景颜色
                            </td>
                        </tr>
                        <tr>
                            <td>.btn-warning</td>
                            <td>
                                警告情景颜色
                            </td>
                        </tr>
                        <tr>
                            <td>.btn-danger</td>
                            <td>
                                危险情景颜色
                            </td>
                        </tr>
                        <tr>
                            <td>.btn-sm</td>
                            <td>
                                叠加更改为较小尺寸按钮
                            </td>
                        </tr>
                        <tr>
                            <td>.btn-lg</td>
                            <td>
                                叠加更改为较大尺寸按钮
                            </td>
                        </tr>
                        <tr>
                            <td>.btn-ghost</td>
                            <td>
                                叠加更改为幽灵按钮
                            </td>
                        </tr>
                        <tr>
                            <td>.btn-link</td>
                            <td>
                                叠加更改为链接按钮
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr id="color（色彩）">
                <td>color.less</td>
                <td>
                    <table class="table table-hover">
                        <tr>
                            <td>.text-muted</td>
                            <td>
                                <p class="text-muted">次要内容</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.text-primary</td>
                            <td>
                                <p class="text-primary">主色调文字</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.text-auxiliary</td>
                            <td>
                                <p class="text-auxiliary">辅助色文字</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.text-success</td>
                            <td>
                                <p class="text-success">成功情景色</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.text-info</td>
                            <td>
                                <p class="text-info">中性情景色</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.text-warning</td>
                            <td>
                                <p class="text-warning">警告情景色</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.text-danger</td>
                            <td>
                                <p class="text-danger">危险情景色</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.bg-muted</td>
                            <td>
                                <p class="bg-muted">次要背景色</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.bg-primary</td>
                            <td>
                                <p class="bg-primary">主色调背景色</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.bg-auxiliary</td>
                            <td>
                                <p class="bg-auxiliary">辅助色背景色</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.bg-success</td>
                            <td>
                                <p class="bg-success">成功情景背景色</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.bg-warning</td>
                            <td>
                                <p class="bg-warning">警告情景背景色</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.bg-danger</td>
                            <td>
                                <p class="bg-danger">危险情景背景色</p>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr id="dl（定义列表）">
                <td>dl.less</td>
                <td>
                    <table class="table table-hover">
                        <tr>
                            <td>.dl</td>
                            <td>
                                美化dl元素
                            </td>
                        </tr>
                        <tr>
                            <td>.dl-table</td>
                            <td>
                                叠加提供对齐定义列表样式
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr id="flex（flex栅格）">
                <td>flex.less</td>
                <td>
                    <p>移动端和高级浏览器可用的flex栅格，沿用流式栅格系统的命名风格，解决flex三代规范演变带来的兼容问题。</p>
                    <table class="table table-hover">
                        <tr>
                            <td>.flex-col</td>
                            <td>定义一个纵向flex容器。</td>
                        </tr>
                        <tr>
                            <td>.flex-row</td>
                            <td>定义一个横向flex容器。</td>
                        </tr>
                        <tr>
                            <td>.flex-1，
                                <br/>.flex-2，
                                <br/>.flex-3，
                                <br/>.flex-4</td>
                            <td>定义flex盒子的主轴尺寸占比。
                                <br/>即，在纵向容器中控制高度，在横向容器中控制宽度。</td>
                        </tr>
                        <tr>
                            <td>.align-stretch</td>
                            <td>flex盒子在侧轴方向伸展。</td>
                        </tr>
                        <tr>
                            <td>.align-center</td>
                            <td>flex盒子在侧轴方向居中对齐。</td>
                        </tr>
                        <tr>
                            <td>.justify-center</td>
                            <td>flex盒子在主轴方向居中对齐。</td>
                        </tr>
                        <tr>
                            <td>.flex-wrap</td>
                            <td>允许flex盒子换行显示，默认不换行。</td>
                        </tr>
                        <tr>
                            <td>.scroll_cont</td>
                            <td>带滚动条区域</td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr id="form（表单）">
                <td>form.less</td>
                <td>
                    <table class="table table-hover">
                        <tr>
                            <td>.form-inline</td>
                            <td>定义一个内联表单
                                <pre>
                                    <code>
    &lt;form class=&quot;form-inline&quot;&gt;
        ...
    &lt;/form&gt;
                                    </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <td>.form-horizontal</td>
                            <td>定义一个整行排列表单
                                <pre>
                                    <code>
    &lt;form class=&quot;form-horizontal&quot;&gt;
        ...
    &lt;/form&gt;
                                    </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <td>.form-group</td>
                            <td>在表单内定义一行，增加行下边距，整行表单中通常配合栅格系统使用
                                <pre>
                                    <code>
    &lt;div class=&quot;form-group row&quot;&gt;
        &lt;div class=&quot;span-2&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;span-10&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
                                    </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <td>.form-group-sm</td>
                            <td>叠加定义一个较小尺寸的行，内部元素自动缩小
                                <pre>
                                    <code>
    &lt;div class=&quot;form-group form-group-sm row&quot;&gt;
        &lt;div class=&quot;span-2&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;span-10&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
                                    </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <td>.form-group-lg</td>
                            <td>叠加定义一个较小尺寸的行，内部元素自动放大
                                <pre>
                                    <code>
    &lt;div class=&quot;form-group form-group-lg row&quot;&gt;
        &lt;div class=&quot;span-2&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;span-10&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
                                    </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <td>.form-control</td>
                            <td>用于普通<code>input</code>元素
                                <pre>
                                    <code>
    &lt;input type=&quot;text&quot; class=&quot;form-control&quot;&gt;
                                    </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <td>.radio</td>
                            <td>
                                定义一个radio元素组合
                                <pre>
                                    <code>
    &lt;label class=&quot;radio&quot;&gt;
        &lt;input type=&quot;radio&quot; value=&quot;1&quot;&gt;radio
    &lt;/label&gt;
                                    </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <td>.radio-inline</td>
                            <td>
                                叠加更改radio组合为内联样式
                                <pre>
                                    <code>
    &lt;label class=&quot;radio radio-inline&quot;&gt;
        &lt;input type=&quot;radio&quot; value=&quot;1&quot;&gt;radio
    &lt;/label&gt;
                                    </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <td>.checkbox</td>
                            <td>
                                定义一个checkbox元素组合
                                <pre>
                                    <code>
    &lt;label class=&quot;checkbox&quot;&gt;
        &lt;input type=&quot;checkbox&quot; value=&quot;1&quot;&gt;checkbox
    &lt;/label&gt;
                                    </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <td>.checkbox-inline</td>
                            <td>
                                叠加更改checkbox组合为内联样式
                                <pre>
                                    <code>
    &lt;label class=&quot;checkbox checkbox-inline&quot;&gt;
        &lt;input type=&quot;checkbox&quot; value=&quot;1&quot;&gt;checkbox
    &lt;/label&gt;
                                    </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <td>.help-block</td>
                            <td>
                                定义一条帮助信息
                                <pre>
                                    <code>
    &lt;div class=&quot;help-block&quot;&gt;
        帮助信息
    &lt;/div&gt;
                                    </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <td>.form-control-static</td>
                            <td>
                                定义一个与form-control元素登高的行
                                <pre>
                                    <code>
    &lt;div class=&quot;form-control-static&quot;&gt;
        ...
    &lt;/div&gt;
                                    </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <td>.control-label</td>
                            <td>
                                定义一个与form-control元素对齐的提示元素
                                <pre>
                                    <code>
    &lt;div class=&quot;form-control-static&quot;&gt;
        请输入姓名
    &lt;/div&gt;
                                    </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <td>.input-sm</td>
                            <td>
                                叠加更改为较小尺寸
                                <pre>
                                    <code>
    &lt;input type=&quot;text&quot; class=&quot;form-control input-sm&quot;&gt;
                                    </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <td>.input-lg</td>
                            <td>
                                叠加更改为较大尺寸
                                <pre>
                                    <code>
    &lt;input type=&quot;text&quot; class=&quot;form-control input-lg&quot;&gt;
                                    </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <td>.form-mark</td>
                            <td>
                                定义一个醒目标记元素
                                <pre>
                                    <code>
    &lt;div class=&quot;control-label&quot;&gt;
    请输入：&lt;big class=&quot;form-mark&quot;&gt;*&lt;/big&gt;
    &lt;/div&gt;
                                    </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <td>.disabled</td>
                            <td>
                                叠加更改为不可用状态
                                <pre>
                                    <code>
    &lt;label class=&quot;checkbox disabled&quot;&gt;
        &lt;input type=&quot;checkbox&quot; value=&quot;1&quot;&gt;checkbox
    &lt;/label&gt;
                                    </code>
                                </pre>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr id="grid（栅格系统）">
                <td>grid.less</td>
                <td>
                    <p>兼容IE7+的12列响应式栅格系统。</p>
                    <h5>基础栅格</h5>
                    <pre>
    <code>
       &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;span-4&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;span-8&quot;&gt;&lt;/div&gt;
       &lt;/div&gt;
    </code>
</pre>
                    <h5>响应式栅格</h5>
                    <pre>
    <code>
       &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;span-4 midd-8 smal-16&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;span-8 midd-8 smal-16&quot;&gt;&lt;/div&gt;
       &lt;/div&gt;
    </code>
</pre>
                    <h5>无间距模式</h5>
                    <pre>
    <code>
       &lt;div class=&quot;full-row&quot;&gt;
          &lt;div class=&quot;span-4 midd-8 smal-16&quot;&gt;无间距模式&lt;/div&gt;
          &lt;div class=&quot;span-8 midd-8 smal-16&quot; style="background:grey;color:#fff;"&gt;无间距模式&lt;/div&gt;
       &lt;/div&gt;
    </code>
</pre>
                    <h5>栅格辅助工具</h5>
                    <pre>
    <code>
    &lt;div class=&quot;row&quot;&gt;
       &lt;div class=&quot;span-8 center&quot;&gt;&lt;p&gt;block1&lt;/p&gt;居中&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;row&quot;&gt;
       &lt;div class=&quot;span-8 pull-right smal-12&quot;&gt;&lt;p&gt;block1&lt;/p&gt;置右&lt;/div&gt;
       &lt;div class=&quot;span-4 smal-12&quot;&gt;&lt;p&gt;block2&lt;/p&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;row&quot;&gt;
       &lt;div class=&quot;span-8 pull-right-4 smal-12&quot;&gt;&lt;p&gt;block1&lt;/p&gt;右位移&lt;/div&gt;
       &lt;div class=&quot;span-4 pull-left-4 smal-12&quot;&gt;&lt;p&gt;block2&lt;/p&gt;左位移&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;row&quot;&gt;
       &lt;div class=&quot;span-8 smal-12 midd-hide smal-show&quot;&gt;&lt;p&gt;block2&lt;/p&gt;中屏隐藏，小屏显示&lt;/div&gt;
       &lt;div class=&quot;span-4 smal-hide&quot;&gt;&lt;p&gt;block3&lt;/p&gt;小屏隐藏&lt;/div&gt;
    &lt;/div&gt;
    </code>
</pre>
                    <p>栅格工具列表：</p>
                    <table class="table table-hover">
                        <tr>
                            <td>.center</td>
                            <td>居中,居中的栅格将成为块级元素占据整行，不能多列栅格共存</td>
                        </tr>
                        <tr>
                            <td>.midd-center</td>
                            <td>中屏居中</td>
                        </tr>
                        <tr>
                            <td>.smal-center</td>
                            <td>小屏居中</td>
                        </tr>
                        <tr>
                            <td>.hide</td>
                            <td>大屏隐藏</td>
                        </tr>
                        <tr>
                            <td>.midd-hide</td>
                            <td>中屏隐藏</td>
                        </tr>
                        <tr>
                            <td>.smal-hide</td>
                            <td>小屏隐藏</td>
                        </tr>
                        <tr>
                            <td>.smal-show</td>
                            <td>小屏显示，用于显示中屏隐藏的元素</td>
                        </tr>
                        <tr>
                            <td>.pull-right</td>
                            <td>置右，置右和位移工具的设计使用场景是，在非小屏下调整DOM顺序，以在小屏下全宽显示时有正确的前后(上下)关系</td>
                        </tr>
                        <tr>
                            <td>.pull-left-1</td>
                            <td> 左位移1格， <strong>注：位移在小屏下会自动清除</strong> </td>
                        </tr>
                        <tr>
                            <td>.pull-left-2</td>
                            <td> 左位移2格， <strong>注：位移在小屏下会自动清除</strong> </td>
                        </tr>
                        <tr>
                            <td>.pull-left-3</td>
                            <td> 左位移3格， <strong>注：位移在小屏下会自动清除</strong> </td>
                        </tr>
                        <tr>
                            <td>...</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>.pull-right-1</td>
                            <td> 右位移1格， <strong>注：位移在小屏下会自动清除</strong> </td>
                        </tr>
                        <tr>
                            <td>.pull-right-2</td>
                            <td> 右位移2格， <strong>注：位移在小屏下会自动清除</strong> </td>
                        </tr>
                        <tr>
                            <td>.pull-right-3</td>
                            <td> 右位移3格， <strong>注：位移在小屏下会自动清除</strong> </td>
                        </tr>
                        <tr>
                            <td>...</td>
                            <td></td>
                        </tr>
                    </table>
                    <h5>栅格嵌套</h5>
                    <p>嵌套栅格也需要带<code>.row</code>或<code>.full-row</code>层，支持无限嵌套。</p>
                    <pre>
 <code>
    &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;span-4&quot;&gt;
      side
    &lt;/div&gt;
    &lt;div class=&quot;span-8&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;span-9&quot;&gt;
          main
        &lt;/div&gt;
        &lt;div class=&quot;span-3&quot;&gt;
          sub
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
 </code>
</pre>
                </td>
            </tr>
            <tr id="iconfont（字体图标）">
                <td>iconfont.less</td>
                <td>
                    <p>内置字体图标库基于<a href="http://ionicons.com/" target="_blank">ionicons</a>创建，图标类名改为"<code>.ion</code>"，为兼容IE7去掉了FontClass支持，只能用Unicode定义图标，借助<a href="http://www.iconfont.cn/" target="_blank">阿里巴巴矢量图标库</a>管理图标。</p>
                    <h4>示例</h4>
                    <pre>
  <code>
    <i class="ion">&#xe64b;</i>:&lt;i class=&quot;ion&quot;&gt;&amp;#xe64b;&lt;/i&gt;
    <i class="ion">&#xe64e;</i>:&lt;i class=&quot;ion&quot;&gt;&amp;#xe64e;&lt;/i&gt;
    <i class="ion">&#xe660;</i>:&lt;i class=&quot;ion&quot;&gt;&amp;#xe660;&lt;/i&gt;
  </code>
</pre>
                    <h4>图标库</h4>
                    <p>为方便图标使用而创建的<a href="http://zangtao.org/projects/icons/" target="_blank">图标库</a>项目，提供图标检索、获取Unicode、PNG定制、PNG下载功能。</p>
                    <p>大部分功能都集成在图标右键菜单中，单击图标也可以快速选中图标Unicode，直接按“<code>Ctrl + C</code>”即可复制，PNG定制功能，可以实现图标大小和颜色调节，并在线生成PNG图片下载（不支持IE）。</p>
                </td>
            </tr>
            <tr id="iconsprite（精灵图标）">
                <td>iconsprite.less</td>
                <td>
                    <p><code>.ico</code>定义一个25px正方形精灵图标，默认支持5x5矩阵，如：</p>
                    <pre>
                        <code>
    &lt;i class=&quot;ico ico1_1&quot;&gt;&lt;/i&gt;
    &lt;i class=&quot;ico ico1_2&quot;&gt;&lt;/i&gt;
                        </code>
                    </pre>
                </td>
            </tr>
            <tr id="label（标签）">
                <td>label.less</td>
                <td>
                    <table class="table table-hover">
                        <tr>
                            <td>.label-list</td>
                            <td>
                                定义标签列表
                            </td>
                        </tr>
                        <tr>
                            <td>.label</td>
                            <td>
                                定义标签元素
                            </td>
                        </tr>
                        <tr>
                            <td>.label-sm</td>
                            <td>
                                叠加更改为较小尺寸标签
                            </td>
                        </tr>
                        <tr>
                            <td>.label-lg</td>
                            <td>
                                叠加更改为较大尺寸标签
                            </td>
                        </tr>
                        <tr>
                            <td>.label-primary</td>
                            <td>
                                叠加定义主色调标签
                            </td>
                        </tr>
                        <tr>
                            <td>.label-auxiliary</td>
                            <td>
                                叠加定义辅助色调标签
                            </td>
                        </tr>
                        <tr>
                            <td>.label-success</td>
                            <td>
                                叠加定义成功色调标签
                            </td>
                        </tr>
                        <tr>
                            <td>.label-info</td>
                            <td>
                                叠加定义中性色调标签
                            </td>
                        </tr>
                        <tr>
                            <td>.label-warning</td>
                            <td>
                                叠加定义警告色调标签
                            </td>
                        </tr>
                        <tr>
                            <td>.label-danger</td>
                            <td>
                                叠加定义危险色调标签
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr id="rect（等比填充）">
                <td>rect.less</td>
                <td>
                    <p>类<code>rect-[比例:number]</code>可以定义一个对应宽高比的矩形，内部<code>._full</code>子元素将充满该矩形，示例：</p>
                    <pre>
          <code>
    &lt;div style=&quot;width:400px&quot;&gt;
      &lt;div class=&quot;rect-75&quot;&gt;
        &lt;img src=&quot;http://temp.im/400x300/&quot; class=&quot;_full&quot;&gt;
      &lt;/div&gt;
    &lt;/div&gt;
          </code>
        </pre>
                    <p>内置比例：</p>
                    <table class="table table-hover">
                        <tr>
                            <td>.rect-4854</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>.rect-50</td>
                            <td>2比1</td>
                        </tr>
                        <tr>
                            <td>.rect-5625</td>
                            <td>16比9</td>
                        </tr>
                        <tr>
                            <td>.rect-60</td>
                            <td>5比3</td>
                        </tr>
                        <tr>
                            <td>.rect-618</td>
                            <td>黄金分割</td>
                        </tr>
                        <tr>
                            <td>.rect-70</td>
                            <td>10比7</td>
                        </tr>
                        <tr>
                            <td>.rect-75</td>
                            <td>4比3</td>
                        </tr>
                        <tr>
                            <td>.rect-80</td>
                            <td>5比4</td>
                        </tr>
                        <tr>
                            <td>.rect-90</td>
                            <td>10比9</td>
                        </tr>
                        <tr>
                            <td>.rect-100</td>
                            <td>1比1</td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr id="reset（样式重置）">
                <td>reset.less</td>
                <td>
                    <p>样式重置的目的在于清除浏览器的默认样式，带来一个干净的定制空间，因此没有使用Normalize.css这种理念太过“平和”的类库，结合Pc端、移动端、响应式网站的综合需求，在去默认样式的基础上，又额外做了一些事情：</p>
                    <ol>
                        <li>去掉触屏点击链接的背景色；</li>
                        <li>全局设置图片最大宽度100%，开发中会造成的常见问题是图片类效果插件显示异常，或百度地图这类自带图片资源的第三方插件显示异常，只要针对性的添加<code>max-width:none</code>即可；</li>
                        <li>对a标签添加0.3s的过渡动画；</li>
                    </ol>
                </td>
            </tr>
            <tr id="space（间距）">
                <td>space.less</td>
                <td>
                    <table class="table table-hover">
                        <tr>
                            <td>.m</td>
                            <td>四周margin普通距离</td>
                        </tr>
                        <tr>
                            <td>.m-0</td>
                            <td>四周margin归零</td>
                        </tr>
                        <tr>
                            <td>.m-l</td>
                            <td>左方margin普通距离</td>
                        </tr>
                        <tr>
                            <td>.m-t</td>
                            <td>上方margin普通距离</td>
                        </tr>
                        <tr>
                            <td>.m-r</td>
                            <td>右方margin普通距离</td>
                        </tr>
                        <tr>
                            <td>.m-b</td>
                            <td>下方margin普通距离</td>
                        </tr>
                        <tr>
                            <td>.m-lr</td>
                            <td>左右两侧margin普通距离</td>
                        </tr>
                        <tr>
                            <td>.m-tb</td>
                            <td>上下两侧margin普通距离</td>
                        </tr>
                        <tr>
                            <td>.m-sm</td>
                            <td>四周margin较小距离</td>
                        </tr>
                        <tr>
                            <td>.m-l-sm</td>
                            <td>左方margin较小距离</td>
                        </tr>
                        <tr>
                            <td>.m-t-sm</td>
                            <td>上方margin较小距离</td>
                        </tr>
                        <tr>
                            <td>.m-r-sm</td>
                            <td>右方margin较小距离</td>
                        </tr>
                        <tr>
                            <td>.m-b-sm</td>
                            <td>下方margin较小距离</td>
                        </tr>
                        <tr>
                            <td>.m-lr-sm</td>
                            <td>左右两侧margin较小距离</td>
                        </tr>
                        <tr>
                            <td>.m-tb-sm</td>
                            <td>上下两侧margin较小距离</td>
                        </tr>
                        <tr>
                            <td>.m-lg</td>
                            <td>四周margin较大距离</td>
                        </tr>
                        <tr>
                            <td>.m-l-lg</td>
                            <td>左侧margin较大距离</td>
                        </tr>
                        <tr>
                            <td>.m-t-lg</td>
                            <td>上方margin较大距离</td>
                        </tr>
                        <tr>
                            <td>.m-r-lg</td>
                            <td>右侧margin较大距离</td>
                        </tr>
                        <tr>
                            <td>.m-b-lg</td>
                            <td>下方margin较大距离</td>
                        </tr>
                        <tr>
                            <td>.m-lr-lg</td>
                            <td>左右两侧margin较大距离</td>
                        </tr>
                        <tr>
                            <td>.m-tb-lg</td>
                            <td>上下方向margin较大距离</td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr id="table（表格）">
                <td>table.less</td>
                <td>
                    <p><code>table</code>类用于美化表格，示例参见该文档中的表格，具有三种叠加状态：</p>
                    <table class="table table-hover">
                        <tr>
                            <td>table-bordered</td>
                            <td>四周带边框线</td>
                        </tr>
                        <tr>
                            <td>table-condensed</td>
                            <td>紧凑型间距</td>
                        </tr>
                        <tr>
                            <td>table-striped</td>
                            <td>斑马线</td>
                        </tr>
                        <tr>
                            <td>table-hover</td>
                            <td>整行悬浮着色</td>
                        </tr>
                        <tr>
                            <td>table-responsive</td>
                            <td>响应式</td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr id="tools（常用工具）">
                <td>tools.less</td>
                <td>
                    <table class="table table-hover table-condensed">
                        <tr>
                            <td>.wrap</td>
                            <td>定义主体内容区域，默认宽度自适应，最大宽度1000px，在移动端左右两边各有2%的间距，宽度支持自定义。</td>
                        </tr>
                        <tr>
                            <td>.fix</td>
                            <td>清除浮动（撑起浮动）</td>
                        </tr>
                        <tr>
                            <td>.oh</td>
                            <td>超出隐藏，同时有清浮动的作用</td>
                        </tr>
                        <tr>
                            <td>.l / .r</td>
                            <td>左 / 右浮动</td>
                        </tr>
                        <tr>
                            <td>.dib</td>
                            <td>使元素呈现为inline-block</td>
                        </tr>
                        <tr>
                            <td>.pr / .pa</td>
                            <td>相 / 绝对定位</td>
                        </tr>
                        <tr>
                            <td>.tc / .tr</td>
                            <td>居中对齐 / 居右对齐</td>
                        </tr>
                        <tr>
                            <td>.el</td>
                            <td>文字单行显示超出显示为省略号</td>
                        </tr>
                        <tr>
                            <td>.hide</td>
                            <td>隐藏元素</td>
                        </tr>
                        <tr>
                            <td>.hidetext</td>
                            <td>隐藏元素内的文字</td>
                        </tr>
                        <tr>
                            <td>.arr</td>
                            <td>border绘图的基础类，实现了一个宽高为0的inline-block元素</td>
                        </tr>
                        <tr>
                            <td>.justify</td>
                            <td>单行文字两端对齐，需设置高度</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </section>
    <section class="wrap" id="js">
        <h2>Javascript</h2>
        <h3 id="js-module">模块化</h3>
        <p>框架实现js模块化开发，模块化很重要价值是前后端分离，引用js不再是页面底部的一堆script标签，js的增删改都不需要编辑、发布前台模板，使js代码可以向css一样容易维护，更多资料可以参考：<a href="https://github.com/seajs/seajs/issues/547" target="_blank">前端模块化开发的价值</a>。</p>
        <h3 id="js-seajs">代码组织</h3>
        <p>基于模块化加载方式，网站脚本拆分为两层：<code>app</code>层和<code>module</code>层</p>
        <p><code>app</code>层是具体业务脚本，每个页面模板都有一个对应的js文件放在项目内<code>js/</code>文件夹中，<code>js/</code>里还有一个<code>common.js</code>用于管理公用代码，这个文件夹组成了站点的业务层。</p>
        <p><code>module</code>层是对特定功能的封装，如jquery、轮显效果、视频播放器，日期选择器，表单验证等，用于被业务层调用，实现特定功能。</p>
        <h3 id="js-app">业务层</h3>
        <p>seajs.use方法可以启动并执行一个模块化的js文件，如首页底部的：<code>seajs.use('js/index');</code>，将启动并执行js/index.js，首页里的js效果都要在这里实现。</p>
        <p>要使用某功能模块，就要先引用模块，语法是<code>require("模块路径")</code>，或者用异步加载的方式<code>require.async("模块路径"，"回调")</code>。</p>
        <p>以index.js为例：</p>
        <pre>
            <code>
  /*
   * index.js
   */
  define(function(require, exports, module) {
     var $ = require('jquery');
     var base=require('base');
     var com = require('./common');
     //...
     
  })
              </code>
        </pre>
        <p>index.js里分别引用了jquery，base和common，并将他们的返回值分别赋值。</p>
        <p>并不是所有的模块都有返回值，例如common模块多数时候只是存放网站通用代码，导航栏、返回顶部、分享代码之类，很少对外提供方法，如果确定一个模块不需要任何返回值也可以只引用不赋值，例如 <code>require('./common')</code>，大多数jquery插件模块也都没有返回值，因为jquery插件方法都扩展在jquery对象上，可以直接通过<code>$.METHODNAME</code>的方式使用。</p>
        <h4>异步加载</h4>
        <p>异步加载的模块不会提前就位，而是当前代码执行到该行时才开始请求模块文件，对于jquery和common这种被其他代码强依赖的模块我们希望尽快加载生效，因此使用同步加载，对于大多数效果类模块则应适度使用异步加载，以提高页面性能，但首屏效果应使用同步加载，以提高首屏响应速度。</p>
        <p><code>require.async</code>得到的模块对象无法通过赋值保存，只能在回调函数中接收为参数，以百度分享模块为例： </p>
        <pre>
            <code>
   require.async('bdshare',function(bdshare){
        //接收百度分享对象：bdshare  
      bdshare({
         bdSize : 16
      });
   });
              </code>
        </pre>
        <h4 id="js-base-common">公用代码common.js</h4>
        <p>common.js内置了网站常用代码，可以根据需求保留或删除</p>
        
        <h3 id="js-modules">模块层</h3>
        <p>模块层封装了大量js模块，模块封装相关文档见 <a href="https://github.com/seajs/seajs/issues/242" target="_blank">CMD模块定义规范</a>。 </p>
        <h4>模块目录</h4>
        <nav class="modules_index" id="modules_index"></nav>
        <h4>使用示例</h4>
        <table class="table table-bordered" id="modules_list">
            <tr id="Audio（跨平台音频播放）">
                <td>audio</td>
                <td>
                    <h5>描述</h5>
                    <p>跨平台音频播放器，详见<a href="http://kolber.github.io/audiojs/" target="_blank">官网</a></p>
                    <h5>多终端</h5>
                    <p>支持</p>
                    <h5>配置</h5>
                    <p>无</p>
                    <h5>示例</h5>
                    <pre>
                        <code>
  &lt;!--html--&gt;
  &lt;audio preload=&quot;auto&quot; &gt;
     &lt;source src=&quot;http://7xnt8z.com1.z0.glb.clouddn.com/sample.mp3&quot; /&gt;
  &lt;/audio&gt;
                      </code>
                    </pre>
                    <pre>
                        <code>
  //js
  require('audio');
  audiojs.events.ready(function() {
    var as = audiojs.createAll();
  });
                    </code>
                </pre>
                </td>
            </tr>
            
            <tr id="Copy（复制到剪贴板）">
                <td>Copy</td>
                <td>
                    <h5>描述</h5>
                    <p>复制文字到剪贴板，详细参数见<a href="http://www.steamdev.com/zclip/" target="_blank">官网</a></p>
                    <h5>多终端</h5>
                    <p>不支持</p>
                    <h5>示例</h5>
                    <pre>
                        <code>
  &lt;div id=&quot;d_clip_button&quot;&gt;复制&lt;/div&gt;
                        </code>
                      </pre>
                    <pre>
                        <code>
  require('copy');

  $('#d_clip_button').zclip({
    copy: "测试" + Math.random(),
    afterCopy:function(){
      console.log('复制成功');
    }
  });
                    </code>
                  </pre>
                </td>
            </tr>
            <tr id="Flv(flv/swf播放器)">
                <td>flv</td>
                <td>
                    <h5>描述</h5>
                    <p>集成vcastr3.0视频播放器，传入视频地址，返回播放器html，支持格式：.swf/.flv</p>
                    <h5>多终端</h5>
                    <p>不支持</p>
                    <h5>配置</h5>
                    <table class="table table-hover">
                        <tr>
                            <th>src</th>
                            <td>视频地址</td>
                        </tr>
                        <tr>
                            <th>width</th>
                            <td>宽,默认480</td>
                        </tr>
                        <tr>
                            <th>height</th>
                            <td>高,默认320</td>
                        </tr>
                        <tr>
                            <th>auto</th>
                            <td>默认false，自动播放</td>
                        </tr>
                        <tr>
                            <th>ctrl</th>
                            <td>默认true，是否有播放控件</td>
                        </tr>
                        <tr>
                            <tr>
                                <th>loop</th>
                                <td>默认false，是否循环播放</td>
                            </tr>
                            <tr>
                                <th>logo</th>
                                <td>Logo处显示的文字</td>
                            </tr>
                            <tr>
                                <th>id</th>
                                <td>给embed标签添加id，默认无</td>
                            </tr>
                    </table>
                    <h5>示例</h5>
                    <pre>
                        <code>
  &lt;!-- html --&gt;
  &lt;div class=&quot;playarea2&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;playarea3&quot;&gt;&lt;/div&gt;
                        </code>
                    </pre>
                    <pre>
                        <code>
  //js
  var player=require('flv');

  var player_2 = player({
     src: 'http://7xnt8z.com1.z0.glb.clouddn.com/sample.flv',
     loop:true
  });
  var player_3 = player({
     src:'http://player.youku.com/player.php/sid/XOTIwMDA5Nzk2/v.swf'
  });

  //将播放器插入页面
  $('.playarea2').html(player_2);
  $('.playarea3').html(player_3);
                      </code>
                    </pre>
                </td>
                </tr>
                <tr id="jquery">
                    <td>jQuery</td>
                    <td>
                        <h5>描述</h5>
                        <p>封装1.x和2.x版本的jquery，seajs.config.js中已配置别名，默认使用1.x</p>
                        <h5>示例</h5>
                        <pre>
                            <code>
    var $ = require('jquery');
    console.log($);
                            </code>
                        </pre>
                    </td>
                </tr>
                <tr id="My97DatePicker（日期选择器）">
                    <td>My97DatePicker</td>
                    <td>
                        <h5>描述</h5>
                        <p>日期选择器，返回日期选择器方法：详细文档见：<a href="http://www.my97.net/dp/demo/index.html" target="_blank">官网</a></p>
                        <h5>多终端</h5>
                        <p>支持，样式待美化</p>
                        <h5>配置</h5>
                        <table class="table table-hover">
                            <tr>
                                <th>skin</th>
                                <td>皮肤，默认'whyGreen'</td>
                            </tr>
                            <tr>
                                <th>dateFmt</th>
                                <td>自定义输出格式，例如<code>yyyy年MM月dd日 HH时mm分ss秒</code></td>
                            </tr>
                        </table>
                        <h5>示例</h5>
                        <pre>
                            <code>
  &lt;!-- html --&gt;
  &lt;div class=&quot;wrap&quot;&gt;
    &lt;p&gt;1.点选日期选择器 &lt;/p&gt;
    &lt;input id=&quot;birthday&quot; type=&quot;text&quot;&gt;

    &lt;p&gt;2.平面日期选择器 &lt;/p&gt;
    &lt;div id=&quot;calendar&quot;&gt; &lt;/div&gt;
  &lt;/div&gt;
                          </code>
                        </pre>
                        <pre>
                            <code>
  //js
  var datepicker=require('My97DatePicker');
  $('#birthday').on('click',function(){
     datepicker();
  });

  //静态日历
  datepicker({
    lang:'en',
    eCont:'calendar',               //日历容器id
    onpicked:function(date){        //点选回调
      alert('你选择的日期是:'+date.cal.getDateStr())
    }})
                            </code>
                        </pre>
                    </td>
                </tr>
                <tr id="Raty（评分）">
                    <td>raty</td>
                    <td>
                        <h5>描述</h5>
                        <p>评分插件，来自https://github.com/wbotelhos/raty</p>
                        <h5>多终端</h5>
                        <p>支持</p>
                        <h5>配置</h5>
                        <table class="table table-hover">
                            <tr>
                                <td>
                                    cancel：
                                </td>
                                <td>
                                    默认false，创建一个取消按钮；
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    cancelPlace：
                                </td>
                                <td>
                                    默认'left'，取消按钮的位置
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    click：
                                </td>
                                <td>
                                    默认undefind，点击回调
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    half：
                                </td>
                                <td>
                                    默认false，允许半星
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    hints:
                                </td>
                                <td>
                                    默认 ['bad', 'poor', 'regular', 'good', 'gorgeous']，每颗星星对应的提示
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    mouseout：
                                </td>
                                <td>
                                    默认undefind，mouseout回调
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    mouseover：
                                </td>
                                <td>
                                    默认undefind，mouseover回调
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    number：
                                </td>
                                <td>
                                    默认5，评分的总星数
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    precision：
                                </td>
                                <td>
                                    默认false，允许选择一个更精确的分数
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    readOnly：
                                </td>
                                <td>
                                    默认false，让评分不可更改
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    score：
                                </td>
                                <td>
                                    默认undefind，初始分数
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    scoreName：
                                </td>
                                <td>
                                    默认'score'，评分插件会创建一个隐藏域存储分数，该项定义隐藏域的name
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    single：
                                </td>
                                <td>
                                    默认false，评分时只有当前那颗星被点亮
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    space：
                                </td>
                                <td>
                                    默认true，星星之间是否有间距
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    target：
                                </td>
                                <td>
                                    默认undefind，jquery选择器格式或原生DOM元素，评分将被显示在该元素中
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    targetFormat：
                                </td>
                                <td>
                                    默认'{score}'，输出到target的格式模板
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    targetKeep：
                                </td>
                                <td>
                                    默认false，当鼠标离开星星时target中的分数是否保留
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    targetScore：
                                </td>
                                <td>
                                    默认undefind，jquery选择器格式或原生DOM元素，用来存储分数的input选择器，插件将不再生成默认隐藏域
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    targetText：
                                </td>
                                <td>
                                    默认''，目标input的默认显示文字
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    targetType：
                                </td>
                                <td>
                                    默认'hint'，目标input显示的类型，可选'score'
                                </td>
                            </tr>
                        </table>
                        <h5>示例</h5>
                        <pre>
                            <code>
  &lt;div class=&quot;demo&quot;&gt;&lt;/div&gt;
                          </code>
                        </pre>
                        <pre>
                        <code>
  require('raty');
  $('.demo').raty();
                          </code>
                        </pre>
                    </td>
                </tr>
                <tr id="Upload（上传）">
                    <td>upload</td>
                    <td>
                        <h5>描述</h5>
                        <p>上传插件，支持html5或ifram方式，改自<a href="https://github.com/aralejs/upload" target="_blank">aralejs/upload</a>，集成<a href="https://github.com/think2011/localResizeIMG" target="_blank">localResizeIMG</a>插件实现前端图片压缩，集成<a href="https://github.com/kairyou/html5-make-thumb" target="_blank">html5-make-thumb</a>实现选择图片返回缩略图。</p>
                        <h5>多终端</h5>
                        <p>支持</p>
                        <h5>配置</h5>
                        <table class="table table-hover">
                            <tr>
                                <th>trigger</th>
                                <td>唤出文件选择器，可以是：选择器、element、jQuery Object</td>
                            </tr>
                            <tr>
                                <th>name</th>
                                <td>上传文件时对应的 name</td>
                            </tr>
                            <tr>
                                <th>action</th>
                                <td>表单提交的地址。</td>
                            </tr>
                            <tr>
                                <th>data</th>
                                <td>随表单一起要提交的数据。</td>
                            </tr>
                            <tr>
                                <th>accept</th>
                                <td>支持的文件类型，比如 image/\* 为只上传图片类的文件。可选项。</td>
                            </tr>
                            <tr>
                                <th>change</th>
                                <td>选择文件回调，回调参数为当前所选文件对象。若不设置，选择文件将自动上传，默认null</td>
                            </tr>
                            <tr>
                                <th>progress</th>
                                <td>上传的进度回调，不支持 IE9-。回调的参数分别为 ajaxEvent, 当前上传字节，总字节，进度百分比和当前文件列表。</td>
                            </tr>
                            <tr>
                                <th>error</th>
                                <td>上传失败的回调函数。</td>
                            </tr>
                            <tr>
                                <th>multiple</th>
                                <td>是否支持多文件上传。默认为 false。</td>
                            </tr>
                            <tr>
                                <th>compress</th>
                                <td>图片是否上传前压缩。默认为 false。</td>
                            </tr>
                            <tr>
                                <th>compressOption</th>
                                <td>上传压缩参数。默认 {}，可配置width和height。</td>
                            </tr>
                            <tr>
                                <th>thumb</th>
                                <td>接收缩略图的回调，回调参数为缩略图base64和文件对象。仅支持IE10及以上浏览器。</td>
                            </tr>
                            <tr>
                                <th>thumbOption</th>
                                <td>生成缩略图的配置，默认
                                    <pre>
                                        <code>
width: 0,               // thumbnail width
height: 0,              //thumbnail height
fill: false,            // fill color when the image is smaller than thumbnails size.
background: '#fff',     // fill color‎
type: 'image/jpeg',     // mime-type for thumbnail ('image/jpeg' | 'image/png')
size: 'contain',        // CSS3 background-size: contain | cover | auto
mark: {},               // watermark
  // text watermark.
  // mark = {padding: 5, height: 18, text: 'test', color: '#000', font: '400 18px Arial'}
  // font: normal, bold, italic
  // bgColor: '#ccc' (background color); bgPadding: 5 (padding)
  // image watermark. (Note: cross-domain is not allowed)
  // mark = {padding: 5, src: 'mark.png', width: 34, height: 45};
stretch: false,         // stretch image(small versions) to fill thumbnail (size = auto | contain)
before: null,           // call function before process image.
fail: null,             // error function
always: null            // complete function(done|fail)
                                          </code>
                                        </pre>
                                    </td>
                                </tr>
                                <tr>
                                    <th>success</th>
                                    <td>上传成功的回调函数。</td>
                                </tr>
                            </table>
                            <h5>演示</h5>
                            <pre>
                                <code>
&lt;button type=&quot;button&quot; id=&quot;selectFile&quot; class=&quot;btn btn-primary&quot;&gt;选择&lt;/button&gt;
&lt;button type=&quot;button&quot; id=&quot;doupload&quot; class=&quot;btn btn-warning&quot;&gt;上传&lt;/button&gt;
                              </code>
                            </pre>
                            <pre>
                                <code>
  require.async('upload', function(Uploader) {
    var uploader = new Uploader({
      trigger: '#selectFile',
      name: 'file',
      action: seajs.root + "/test/fileupload.php",
      progress: function(event, position, total, percent) {
        console.log('已上传 ' + position + '/' + total + ' ' + percent + '%')
      },
      compress: true,
      compressOption: {
        width: 640
      },
      change: function(file){
        console.log(file)
      },
      thumb: function(base64, file){
        var thumb = new Image();
        thumb.src = base64;
        thumb.alt = file.title;
        $('body').append(thumb);
      },
      thumbOption: {
        width: 100,
        height: 100
      },
      success: function(response) {
        console.log('上传完成')
      }
    });

    $('#doupload').on('click', function() {
      uploader.submit()
    })
  })
                          </code>
                        </pre>
                    </td>
                </tr>
                <tr id="Validform（表单验证）">
                    <td>validform</td>
                    <td>
                        <h5>描述</h5>
                        <p>validform表单验证，整合密码强度验证插件。</p>
                        <h5>多终端</h5>
                        <p>支持</p>
                        <h5>内置验证规则</h5>
                        <table class="table table-hover">
                            <tr>
                                <td>
                                    *：
                                </td>
                                <td>
                                    检测是否有输入，可以输入任何字符，不留空即可通过验证；
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    *4-16：</td>
                                <td>检测是否为4到16位任意字符；
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    n：</td>
                                <td>数字类型；
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    n4-16：</td>
                                <td>4到16位数字；
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    s：</td>
                                <td>字符串类型；
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    s4-16：</td>
                                <td>4到16位字符串；
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    p：</td>
                                <td>验证邮政编码；
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    m：</td>
                                <td>手机号码格式；
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    tel：</td>
                                <td>座机号码格式；
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    phone：</td>
                                <td>手机或座机号码格式；
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    e：</td>
                                <td>email格式；
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    url：</td>
                                <td>验证字符串是否为网址
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    其他验证直接写正则
                                </td>
                                <td>例如验证中文：<code>datatype="/^[\u4e00-\u9fa5]*$/"</code></td>
                            </tr>
                        </table>
                        <h5>配置</h5>
                        <p>这里只列举新增配置和开发中常见问题，普通使用参考演示demo，使用细节访问<a href="http://validform.rjboy.cn/document.html" target="_blank">官方文档</a>。</p>
                        <table class="table">
                            <tr>
                                <td>
                                    allable:
                                </td>
                                <td>
                                    默认false，设置为true将提交属性为disable的元素值
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    tiptype:
                                </td>
                                <td>
                                    验证结果显示方式，默认1，1:弹出提示，2:输入框后插入
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    tipSweep:
                                </td>
                                <td>
                                    是否只在提交前集中验证，默认false，每个输入框blur都会出发验证
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    dataType：
                                </td>
                                <td>
                                    ajax提交方式的返回数据格式，默认"json"
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    ajaxData:
                                </td>
                                <td>
                                    ajax提交方式的扩展数据，默认无
                                </td>
                            </tr>
                            <tr>
                                <td>ajaxurl返回值</td>
                                <td>
                                    <p>ajaxurl（实时验证）的处理页需要返回的数据格式：</p>
                                    <pre>
                                        <code>
  /*
  * type: json
  * status: 状态，"y"或"n"
  * info: 返回信息，当status不为"y"时此信息将以错误提示的形式显示
  */

  {
    "status": "n",
    "info": "用户名已被注册！"
  }
                                  </code>
                                </pre>
                                </td>
                            </tr>
                            <tr>
                                <td>beforeCheck</td>
                                <td>
                                    <p>验证前的操作，例如验证前要先检查登陆状态，这些代码应该在"beforeCheck"回调中写，如果明确"return false"的话将不会继续执行表单验证：</p>
                                    <pre>
                                        <code>
  var loginForm = $('#reg_form').Validform({
      beforeCheck:function(form){
        //在这做验证前操作，可以通过"return false"语句中断验证
      },
      callback:function(res){
        
      }
    });
                                  </code>
                                </pre>
                                </td>
                            </tr>
                            <tr>
                                <td>beforeSubmit</td>
                                <td>
                                    <p>验证后、提交前的操作，例如要在表单验证之后提交之前，先对某些表单数据做合并或格式转化操作，应该在"beforeSubmit"回调中做处理，如果该回调中明确 "return false" 的话,表单将不被提交：</p>
                                    <pre>
                                        <code>
  var loginForm = $('#reg_form').Validform({
      beforeSubmit:function(form){
        //在这里对表单数组做处理，也可以通过"return false"语句中断提交
      },
      callback:function(res){
        
      }
    });
                                  </code>
                                </pre>
                                </td>
                            </tr>
                        </table>
                        <h5>示例</h5>
                        <pre>
                            <code>
  &lt;style&gt;
  .demo label{display: inline-block;width: 5em;vertical-align: middle;}
  &lt;/style&gt;
                            </code>
                            <code>
  &lt;form class=&quot;demo&quot; id=&quot;reg_form&quot;&gt;
     &lt;p&gt;
     &lt;label&gt;用户名：&lt;/label&gt;
     &lt;input type=&quot;text&quot; class=&quot;inp&quot; name=&quot;username&quot; datatype=&quot;/^[A-Za-z0-9\u9fa5@\u9fa5.]{2,20}$/&quot;
     sucmsg=&quot;用户名验证通过！&quot; nullmsg=&quot;请输入用户名！&quot; errormsg=&quot;用户名非法!&quot;&gt;
     &lt;/p&gt;
     &lt;p&gt;
     &lt;label&gt;密 码：&lt;/label&gt;
     &lt;input type=&quot;password&quot; class=&quot;inp&quot; name=&quot;userpassword&quot; datatype=&quot;*6-15&quot;
     errormsg=&quot;密码范围在6~15位之间！&quot; plugin=&quot;passwordStrength&quot; &gt;
     &lt;span class=&quot;passwordStrength&quot; style=&quot;&quot;&gt;&lt;b&gt;密码强度：&lt;/b&gt; &lt;span&gt;弱&lt;/span&gt;&lt;span&gt;中&lt;/span&gt;&lt;span class=&quot;last&quot;&gt;强&lt;/span&gt;&lt;/span&gt;
     &lt;/p&gt;
     &lt;p&gt;
     &lt;label&gt;确认密码：&lt;/label&gt;
     &lt;input type=&quot;password&quot; name=&quot;userpassword2&quot; datatype=&quot;*&quot; recheck=&quot;userpassword&quot; errormsg=&quot;您两次输入的密码不一致！&quot;&gt;
     &lt;/p&gt;
     &lt;p&gt;
     &lt;label&gt;邮箱：&lt;/label&gt;
     &lt;input type=&quot;text&quot; class=&quot;inp&quot; name=&quot;email&quot; datatype=&quot;e&quot;  errormsg=&quot;请输入正确的邮箱!&quot; ignore=&quot;ignore&quot;&gt;
     &lt;/p&gt;
     &lt;p class=&quot;valid&quot;&gt;
     &lt;label&gt;验证码：&lt;/label&gt;
     &lt;input type=&quot;text&quot; class=&quot;inp&quot; name=&quot;validnum&quot; datatype=&quot;*&quot; ajaxurl=&quot;/test/validRand.php&quot;
     sucmsg=&quot;验证码正确！&quot; nullmsg=&quot;请输入验证码！&quot; errormsg=&quot;验证码错误!&quot;&gt;
     &lt;img src=&quot;http://temp.im/80x20/?text=8888&quot; id=&quot;rand&quot; &gt;看不清？&lt;a href=&quot;###&quot; id=&quot;&quot;&gt;换一张&lt;/a&gt;
     &lt;/p&gt;
     &lt;p&gt;
     &lt;a href=&quot;###&quot;&gt;同意用户协议&lt;/a&gt; &lt;input type=&quot;checkbox&quot; name=&quot;agree&quot; datatype=&quot;*&quot; nullmsg=&quot;请阅读并同意用户协议&quot; &gt;
     &lt;/p&gt;
     &lt;p&gt;
     &lt;button type=&quot;submit&quot; class=&quot;btn&quot;&gt;注册&lt;/button&gt;
     &lt;/p&gt;
  &lt;/form&gt;
                            </code>
                        </pre>
                        <pre>
                            <code>
  //js
  require('validform');
  var loginForm = $('#reg_form').Validform({
      tiptype:1,              //1：弹出；其他：输入框后插入
      ajaxPost:true,
      url: seajs.root + '/test/ajax.php',
      usePlugin:{             //密码强度插件，不需要就删掉
        passwordstrength:{
          minLen:6,     //设置密码长度最小值，默认为0;
          maxLen:16,    //设置密码长度最大值，默认为30;
          trigger:function(obj,error){            
            if(error){
              obj.parent().find(".Validform_checktip").show();
              obj.parent().find(".passwordStrength").hide();
            }else{
              obj.parent().find(".Validform_checktip").hide();
              obj.parent().find(".passwordStrength").show();  
            }
          }
        }
      },
      callback:function(res){
        
      }
    });
                            </code>
                        </pre>
                    </td>
                </tr>
                <tr id="Video（跨平台视频播放）">
                    <td>video</td>
                    <td>
                        <h5>描述</h5>
                        <p>集成video-js实现的跨平台视频播放插件，支持HTML5视频的跨平台播放，详见<a href="https://github.com/videojs/video.js" target="_blank">项目主页</a></p>
                        <h5>多终端</h5>
                        <p>支持</p>
                        <h5>配置</h5>
                        <table class="table table-hover">
                            <tr>
                                <th>controls</th>
                                <td>是否有控件</td>
                            </tr>
                            <tr>
                                <th>autoplay</th>
                                <td>是否自动播放</td>
                            </tr>
                            <tr>
                                <th>preload</th>
                                <td>预加载，可选'auto','metadata','no'，分别是自动，仅加载视频信息数据，不加载</td>
                            </tr>
                            <tr>
                                <th>poster</th>
                                <td>封面图片</td>
                            </tr>
                            <tr>
                                <th>loop</th>
                                <td>默认false，是否循环播放</td>
                            </tr>
                            <tr>
                                <tr>
                                    <th>width</th>
                                    <td>播放器宽度</td>
                                </tr>
                                <tr>
                                    <th>height</th>
                                    <td>播放器高度</td>
                                </tr>
                                <tr>
                                    <th>其他</th>
                                    <td>见<a href="https://github.com/videojs/video.js/blob/stable/docs/index.md" target="_blank">官方文档</a></td>
                                </tr>
                        </table>
                        <h5>示例</h5>
                        <pre>
                            <code>
  &lt;video id=&quot;really-cool-video&quot; class=&quot;video-js vjs-default-skin&quot;&gt;
    &lt;source src=&quot;http://7xnt8z.com1.z0.glb.clouddn.com/sample.mp4&quot; type='video/mp4'&gt;
    &lt;p class=&quot;vjs-no-js&quot;&gt;不支持js的浏览器会看到这个&lt;/p&gt;
  &lt;/video&gt;
                            </code>
                        </pre>
                        <pre>
                            <code>
  require('video');
  var player = videojs('really-cool-video', {
    width: 640,
    height: 264,
    poster: seajs.root + '/web/img/apple-touch-icon.png',
    controls:true,
    autoplay:true,
    preload:'auto'
  });
                            </code>
                        </pre>
                    </td>
                    </tr>
                    <tr id="Webuploader（上传）">
                        <td>webuploader</td>
                        <td>
                            <h5>描述</h5>
                            <p>改造自<a href="http://fex.baidu.com/webuploader/" target="_blank">webuploader</a>，兼容ie6 +，android4 +，支持上传前压缩，上传前剪裁，分段上传，MD5秒传，断点续传</p>
                            <p>插件封装的很底层，用起来较麻烦，但是功能很全面，demo演示了一个具有拖拽上传、截图粘贴上传、格式过滤、获取缩略图、上传前压缩、队列管理功能的上传示例。</p>
                            <h5>多终端</h5>
                            <p>支持</p>
                            <h5>配置</h5>
                            <p>见<a href="http://fex.baidu.com/webuploader/doc/index.html" target="_blank">官网文档</a></p>
                            <h5>示例</h5>
                            <pre>
                                <code>
  &lt;style&gt;
  .demo{margin:50px;border:4px dashed #ccc;padding:100px;}
  .uploader-list{overflow: hidden;margin:10px 0;}
  .uploader-list .file-item{float: left;width: 100px;height: 100px;position: relative;
  border:4px solid #ccc;border-radius: 4px;margin:0 8px 8px 0;overflow: hidden;}
  .uploader-list .file-item .info{position: absolute;left: 0;bottom:0;width: 100%;
  background:rgba(0,0,0,.5);color:#fff;text-align: center;}
  .uploader-list .file-item .progress{position: absolute;left: 0;height: 40px;top:50%;
  margin-top:-20px;width: 100%; }
  .uploader-list .file-item .progress span{position: absolute;left: 0;top:0;height: 100%;overflow: hidden;width: 0;background:green;opacity: .5;} 
  .uploader-list .file-item.upload-state-done{border-color:green;}
  .uploader-list .remove{position:absolute;right:0;top:0;font-size:1.5em;cursor:pointer;}
  .uploader-list .remove:hover{opacity:.8;}
  &lt;/style&gt;
  
  &lt;div id=&quot;uploader-demo&quot; class=&quot;demo&quot;&gt;
      &lt;div id=&quot;fileList&quot; class=&quot;uploader-list&quot;&gt;&lt;/div&gt;
      &lt;div id=&quot;filePicker&quot; class=&quot;btn btn-default&quot; &gt;选择图片&lt;/div&gt;
      &lt;div id=&quot;ctlBtn&quot; class=&quot;webuploader-pick btn btn-success&quot;&gt;开始上传&lt;/div&gt;
  &lt;/div&gt;
                                </code>
                              </pre>
                                <pre>
                                    <code>
  var WebUploader = require('webuploader');

  //初始化上传实例
    var uploader = WebUploader.create({
      auto:false,                       // 自动上传，默认false
      server: '/test/fileupload.php',   // 上传地址
      pick: '#filePicker',              // 选择文件按钮
      sendAsBinary: true,               // 避免部分版本安卓微信无法上传问题
      accept:{                           
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png', // 限制文件扩展名
        mimeTypes: 'image/*'                // 限制选择文件时的可见格式
    },
    compress:{                          // 设置上传压缩
      width: 800,
      height: 600
    }
  });

    //添加到上传列队
    uploader.on( 'fileQueued', function( file ) {
      var $li = $(
              '&lt;div id=&quot;' + file.id + '&quot; class=&quot;file-item thumbnail&quot;&gt;' +
                  '&lt;img&gt;' +
                  '&lt;div class=&quot;ion remove text-danger&quot;&gt;&#xe63d;&lt;/div&gt;' +
                  '&lt;div class=&quot;info&quot;&gt;' + file.name + '&lt;/div&gt;' +
              '&lt;/div&gt;'
              ),
          $img = $li.find('img');
      $('#fileList').append( $li );

      // 创建缩略图
      uploader.makeThumb( file, function( error, src ) {
          if ( error ) {
              $img.replaceWith('&lt;span&gt;不能预览&lt;/span&gt;');
              return;
          }
          $img.attr( 'src', src );
      } ,100 ,100);
      console.log('file add to queue,size:'+file.size/1024)
  });

  // 监听上传进度
  uploader.on( 'uploadProgress', function( file, percentage ) {
      var $li = $( '#'+file.id ),
          $percent = $li.find('.progress span');

      if ( !$percent.length ) {
          $percent = $('&lt;p class=&quot;progress&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;/p&gt;')
                  .appendTo( $li )
                  .find('span');
      }
      console.log(percentage);
      $percent.css( 'width', percentage * 100 + '%' );
  });

  // 上传后判断服务器返回信息
  uploader.on( 'uploadAccept', function( file, response ) {
    if(response.err){
      //不成功
      return false;
    }   
  });

  // 如果文件上传成功
  uploader.on( 'uploadSuccess', function( file, response ) {
      console.log('upload size:'+file.size/1024);
      $( '#'+file.id ).addClass('upload-state-done');
  });

  // 如果文件上传失败
  uploader.on( 'uploadError', function( file ) {
      console.log('uploadError');
      var $li = $( '#'+file.id ),
          $error = $li.find('div.error');

      if ( !$error.length ) {
          $error = $('&lt;div class=&quot;error&quot;&gt;&lt;/div&gt;').appendTo( $li );
      }

      $error.text('上传失败');
  });

  // 完成上传后，无论成功或者失败，都移除文件队列和进度条。
  uploader.on( 'uploadComplete', function( file ) {
      uploader.removeFile(file.id,true);
      $( '#'+file.id ).fadeOut(512);
  });

  // 绑定上传按钮
  $('#ctlBtn').on( 'click', function() {
      uploader.upload();
  });

  //绑定删除按钮
  $('#fileList').on('click','.remove',function(){
    var DOM = $(this).parent();
    uploader.removeFile(DOM.attr('id'),true);
    DOM.remove();
    DOM = null;
  });

                            </code>
                          </pre>
                        </td>
                    </tr>
                    <tr id="Album（相册）">
                        <td>album</td>
                        <td>
                            <h5>描述</h5>
                            <p>相册插件，依赖幻灯片模块(slide.js)。</p>
                            <h5>多终端</h5>
                            <p>支持</p>
                            <h5>配置</h5>
                            <table class="table table-hover">
                                <tr>
                                    <th>blankclose</th>
                                    <td>默认false，点空白关闭</td>
                                </tr>
                                <tr>
                                    <th>title</th>
                                    <td>默认null，匹配的元素文字将作为标题显示</td>
                                </tr>
                                <tr>
                                    <th>cell</th>
                                    <td>默认'li'，相册展示的元素</td>
                                </tr>
                                <tr>
                                    <th>trigger</th>
                                    <td>默认等于cell，触发相册的元素，可传入cell的子元素选择器</td>
                                </tr>
                                <tr>
                                    <th>type</th>
                                    <td>皮肤，可选 1:普通 | 2:前后缩略图 | 3:所有缩略图</td>
                                </tr>
                                <tr>
                                    <th>hook</th>
                                    <td>默认空字符串，用于附加自定义样式</td>
                                </tr>
                                <tr>
                                    <th>effect</th>
                                    <td>切换效果，可选 slide | fade | toggle</td>
                                </tr>
                                <tr>
                                    <th>animate</th>
                                    <td>动画曲线，默认“swing”</td>
                                </tr>
                                <tr>
                                    <th>duration</th>
                                    <td>效果时长，单位ms，默认480</td>
                                </tr>
                                <tr>
                                    <th>prevHtml</th>
                                    <td>默认'<i class="ion">&#xe6c3;</i>'，左箭头html</td>
                                </tr>
                                <tr>
                                    <th>nextHtml</th>
                                    <td>默认'<i class="ion">&#xe6c4;</i>'，右箭头html</td>
                                </tr>
                                <tr>
                                    <th>imgattr</th>
                                    <td>默认无，存放展示图片地址的img属性，注意<code>data-src</code>已被响应图片方案占用，避免冲突</td>
                                </tr>
                                <tr>
                                    <th>callback</th>
                                    <td>回调，参数同slide.js</td>
                                </tr>
                                <tr>
                                    <th>ext</th>
                                    <td>扩展，参数同slide.js</td>
                                </tr>
                            </table>
                            <h5>示例</h5>
                            <pre>
                                <code>
          &lt;style&gt;
          .demo{overflow: hidden;padding:1em;}
          .demo li{float: left;width: 240px;height: 150px;overflow: hidden;margin:0 .5em;}
          &lt;/style&gt;
          &lt;div class=&quot;demo&quot;&gt;
              &lt;ul&gt;
                  &lt;li class=&quot;show&quot;&gt;
                      &lt;img src=&quot;http://temp.im/640x320/?1&quot; &gt;
                      &lt;div class=&quot;_title&quot;&gt;1这行字会成为标题&lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li class=&quot;show&quot;&gt;
                      &lt;img src=&quot;http://temp.im/640x320/?1&quot; &gt;
                      &lt;div class=&quot;_title&quot;&gt;2这行字会成为标题&lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li class=&quot;show&quot;&gt;
                      &lt;img src=&quot;http://temp.im/640x320/?3&quot; &gt;
                      &lt;div class=&quot;_title&quot;&gt;3这行字会成为标题&lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li class=&quot;show&quot;&gt;
                      &lt;img src=&quot;http://temp.im/640x320/?4&quot; &gt;
                      &lt;div class=&quot;_title&quot;&gt;4这行字会成为标题&lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;img src=&quot;http://temp.im/640x320/?5&quot; &gt;
                      &lt;div class=&quot;_title&quot;&gt;这个li不会在相册中显示&lt;/div&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
                                </code>
                              </pre>
                            <pre>
                                <code>
          require.async('album',function(){
             $('.demo').album({
                title: '._title',
                cell: '.show'
             })
          })
                                </code>
                          </pre>
                        </td>
                    </tr>
                    <tr id="Autocomplete（自动补全）">
                        <td>autocomplete</td>
                        <td>
                            <h5>描述</h5>
                            <p>自动补全插件，移植自<a href="https://github.com/devbridge/jQuery-Autocomplete" target="_blank">jquery.autocomplete</a></p>
                            <p>UI部分跟select有很大重叠，后期可能会作为select插件的一个功能模块，不会独立存在。</p>
                            <h5>多终端</h5>
                            <p>支持</p>
                            <h5>配置</h5>
                            <table class="table table-hover">
                                <tr>
                                    <th>serviceUrl</th>
                                    <td>远程请求地址，返回数据格式：
                                        <pre>
                                            <code>
//格式一，有附加数据
{
    "suggestions": [
        { "value": "United Arab Emirates", "data": "AE" },
        { "value": "United Kingdom",       "data": "UK" },
        { "value": "United States",        "data": "US" }
    ]
}
//格式二，无附加数据
{
    "query": "Unit",
    "suggestions": ["United Arab Emirates", "United Kingdom", "United States"]
}
                                        </code>
                                      </pre>
                                    </td>
                                </tr>
                                <tr>
                                    <th>lookup</th>
                                    <td>本地查找数据，数据格式见示例。</td>
                                </tr>
                                <tr>
                                    <th>onSelect</th>
                                    <td>选中匹配项回调方法，接收选中的数据对象为参数。</td>
                                </tr>
                            </table>
                            <p>完整API见<a href="https://github.com/devbridge/jQuery-Autocomplete#api" target="_blank">官方文档</a></p>
                            <h5>示例</h5>
                            <pre>
                                <code>
  &lt;!-- html --&gt;
  &lt;form&gt;
      &lt;input type=&quot;text&quot; name=&quot;country&quot; id=&quot;autocomplete-ajax&quot; /&gt;
      &lt;button type=&quot;submit&quot;&gt;search&lt;/button&gt;
  &lt;/form&gt;
                                </code>
                              </pre>
                            <pre>
                                <code>
    // js
    var countriesArray = [{"value":"Andorra","data":"AD"},{"value":"United Arab Emirates","data":"AE"},{"value":"Afghanistan","data":"AF"},{"value":"Antigua and Barbuda","data":"AG"},{"value":"Anguilla","data":"AI"},{"value":"Albania","data":"AL"},{"value":"Armenia","data":"AM"},{"value":"Netherlands Antilles","data":"AN"},{"value":"Angola","data":"AO"},{"value":"Antarctica","data":"AQ"},{"value":"Argentina","data":"AR"},{"value":"American Samoa","data":"AS"},{"value":"Austria","data":"AT"},{"value":"Australia","data":"AU"},{"value":"Aruba","data":"AW"},{"value":"Åland Islands","data":"AX"},{"value":"Azerbaijan","data":"AZ"},{"value":"Bosnia and Herzegovina","data":"BA"},{"value":"Barbados","data":"BB"},{"value":"Bangladesh","data":"BD"},{"value":"Belgium","data":"BE"},{"value":"Burkina Faso","data":"BF"},{"value":"Bulgaria","data":"BG"},{"value":"Bahrain","data":"BH"},{"value":"Burundi","data":"BI"},{"value":"Benin","data":"BJ"},{"value":"Saint Barthélemy","data":"BL"},{"value":"Bermuda","data":"BM"},{"value":"Brunei","data":"BN"},{"value":"Bolivia","data":"BO"},{"value":"British Antarctic Territory","data":"BQ"},{"value":"Brazil","data":"BR"},{"value":"Bahamas","data":"BS"},{"value":"Bhutan","data":"BT"},{"value":"Bouvet Island","data":"BV"},{"value":"Botswana","data":"BW"},{"value":"Belarus","data":"BY"},{"value":"Belize","data":"BZ"},{"value":"Canada","data":"CA"},{"value":"Cocos [Keeling] Islands","data":"CC"},{"value":"Congo - Kinshasa","data":"CD"},{"value":"Central African Republic","data":"CF"},{"value":"Congo - Brazzaville","data":"CG"},{"value":"Switzerland","data":"CH"},{"value":"Côte d’Ivoire","data":"CI"},{"value":"Cook Islands","data":"CK"},{"value":"Chile","data":"CL"},{"value":"Cameroon","data":"CM"},{"value":"China","data":"CN"},{"value":"Colombia","data":"CO"},{"value":"Costa Rica","data":"CR"},{"value":"Serbia and Montenegro","data":"CS"},{"value":"Canton and Enderbury Islands","data":"CT"},{"value":"Cuba","data":"CU"},{"value":"Cape Verde","data":"CV"},{"value":"Christmas Island","data":"CX"},{"value":"Cyprus","data":"CY"},{"value":"Czech Republic","data":"CZ"},{"value":"East Germany","data":"DD"},{"value":"Germany","data":"DE"},{"value":"Djibouti","data":"DJ"},{"value":"Denmark","data":"DK"},{"value":"Dominica","data":"DM"},{"value":"Dominican Republic","data":"DO"},{"value":"Algeria","data":"DZ"},{"value":"Ecuador","data":"EC"},{"value":"Estonia","data":"EE"},{"value":"Egypt","data":"EG"},{"value":"Western Sahara","data":"EH"},{"value":"Eritrea","data":"ER"},{"value":"Spain","data":"ES"},{"value":"Ethiopia","data":"ET"}];

    require('autocomplete')
    $('#autocomplete-ajax').autocomplete({
          lookup: countriesArray,                    //本地查找数据
          onSelect: function(data){
            console.log(data);
          }
    });
                            </code>
                          </pre>
                        </td>
                    </tr>
                    <tr id="Base（工具包）">
                        <td>base</td>
                        <td>
                            <h5>描述</h5>
                            <p>封装常用工具</p>
                            <h5>功能列表</h5>
                            <table class="table table-bordered js-base-table">
                                <tr>
                                     <td>getUID</td>
                                     <td>返回一个递增数字</td>
                                 </tr>
                                 <tr>
                                     <td>getUUID</td>
                                     <td>返回一个随机数字字母组合，接收长度参数，不传默认6位</td>
                                 </tr>
                              <tr>
                                 <td>ajaxSetup</td>
                                 <td>
                                  <p>$.ajax增强，对请求的json数据做如下格式要求：</p>
                                  <pre>
                                    <code>
{
  status: "Y/N",   //必须，代表操作是否成功
  data: "...",     //请求返回的数据
  msg: "..."       //操作提示信息
}
                                    </code>
                                  </pre>
                                  <ol>
                                    <li>默认超时时间配置，见seajs.config.js文件：
                                    <code>
seajs.set = {
  util: {
    timeout: 1.5e4
  }
};
                                      </code>
                                    </li>
                                    <li>默认<code>dataType</code>为<code>"json"</code>；</li>
                                    <li>支持数据本地缓存，需浏览器支持localStorage，<code>localCache</code>参数传入数字将作为超时时间（毫秒数），传入0或任意假值将清除该缓存，示例
                                        <pre>
                                            <code>
var $ = require('jquery');
var base = require('base');
base.ajaxSetup($);
$.ajax({
  url: api.getxxx,
  localCache: 1e5,                  //缓存100s
  success:function(res, err){
    
  }
})
                                            </code>
                                        </pre>
                                    </li>
                                    <li><code>success</code>回调增强，success回调除了请求返回的数据以外还将收到一个err参数，布尔值，代表请求是否失败（根据status值判断，跟默认的error回调无关），如果返回数据带有msg信息，将以box插件的msg方法提示2s，提示结束后继续执行success，示例：
                                      <pre>
                                        <code>
$.ajax({
  url: seajs.root + '/test/data.json',
  success:function(res, err){
    if(err){
      return console.warn('请求失败');
    }
    console.log(res);
  }
})
                                        </code>
                                      </pre>
                                    </li>
                                    <li><code>error</code>回调默认处理，根据ajax的四种错误原因使用box插件弹出提示</li>
                                    <li>ajax请求合并，见 <a href="#ajaxcombo">【解决方案-AJAX合并】</a></li>
                                  </ol>
                                  
                                 </td>
                              </tr>
                              <tr>
                                 <td>base.browser</td>
                                 <td>
                                  <p>浏览器信息：</p>
                                  <table class="table table-hover">
                                    <tr>
                                      <th>base.browser.isMobile:</th>
                                      <td>[boolean]是否移动设备 </td>
                                    </tr>
                                    <tr>
                                      <th>base.browser.ie:</th>
                                      <td>[number]返回ie版本，ie11及以上和非ie返回0</td>
                                    </tr>
                                    <tr>
                                      <th>base.browser.platform:</th>
                                      <td>[string]浏览器运行平台</td>
                                    </tr>
                                    <tr>
                                      <th>base.browser.agent:</th>
                                      <td>[string]浏览器用户代理头信息</td>
                                    </tr>
                                    <tr>
                                      <th>base.browser.support3d:</th>
                                      <td>[boolean]是否支持3d转换</td>
                                    </tr>
                                  </table>
                                 </td>
                              </tr>
                              <tr>
                                 <td>base.getStyle(ele,attr)</td>
                                 <td>获取元素的属性值，ele：元素；attr：要获取的属性，返回属性值</td>
                              </tr>
                              <tr>
                                 <td>$.cookie(name,value)</td>
                                 <td>操作cookie，name：键名；value：设置为的值，一个参数取值，返回value，两个参数赋值，无返回值</td>
                              </tr>
                              <tr>
                                 <td>base.toload(option)</td>
                                 <td>
                                   <p>通用分页加载，自动生成递增页码，支持多进程。</p>
                                   <p></p>
                                <pre>
                                <code>
  /*
  * @option.type(string):请求方式，默认'post'
  * @option.url(string):请求地址，默认无
  * @option.size(number):请求条数，默认6
  * @option.data(object):请求参数，默认{}，不得有"page_index"和"page_size"键
  * @option.dataType(string):返回格式，默认'json'
  * @option.reload(boolean):初始化页码，默认false，用于实现"刷新"类功能
  * @option.success(function):ajax成功回调，默认无
  * @option.error(function):ajax错误回调，默认无
  * @服务器返回值:默认需返回status键为'ok'的json，否则视为异常或没有下一页数据，若修改dataType为非json，只要有返回值就视为正常
  */

  base.toload({
    type:'get',
    url:seajs.root + '/test/data.json',
    data:{
      "method":"test"
    },
    success:function(data){ 
      console.log(data);
    }
  });

  // 服务器端将接收到的参数：
  {
    "method" : "test",
    "page_index" : 0,           //从0开始，每次+1
    "page_size" : 6
  }

  //服务器端需要返回的数据：
  {
    "status" : "ok",
    "data" : ... 
  }

                                        </code>
                                      </pre>
                                     </td>
                                  </tr>
                                  <tr>
                                     <td>base.throttle(fn, [delay], [duration])</td>
                                     <td>
                                        <p>函数节流，用于过滤resize，mousemove，scroll这类频连续繁触发事件</p>
                                      <pre>
                                        <code>
  /*
  * @fn(function)：要节流执行的函数
  * @delay(number): 隔内连续触发的事件将被屏蔽，可选，默认64，单位ms
  * @duration(number): 间隔内至少执行一次事件，可选，默认640，单位ms
  * return(function)：新的节流函数，可直接在密集事件中执行
  */

  // 查看控制台，IE效果更明显
  var thro = base.throttle(function(){
        console.log('thro resize')
      });

  $(window).on('resize',thro);
                                        </code>
                                      </pre>
                                     </td>
                                  </tr>
                                  <tr>
                                     <td>base.getUrlParam(name, [url])</td>
                                     <td>
                                     <p>获取url参数。</p>
                                      <pre>
                                        <code>
  /*
  * @name：要获取的参数名
  * @url：要检索的url，可选，默认检索当前窗口url
  */

  // 当前url
  http://localhost:8001/web/pro-list.htm?cat_id=2643

  // js
  console.log(base.getUrlParam('cat_id'));                // 输出 2643
  console.log(base.getUrlParam('cat_id','http://a.b.c?cat_id=wakaka'));  // 输出 wakaka
                                    </code>
                                  </pre>
                                 </td>
                              </tr>
                              <tr>
                                <td>base.getScript(file, [callabck], [option])</td>
                                <td>
                                  <p>加载未模块化的普通js文件，可控制jquery依赖、指定css依赖、添加回调，支持批量加载及批量线性依赖加载。</p>
                                  <pre>
                                    <code>
  /*
  * @file:(string/array) 加载的js路径，规则与require/require.async方法相同
  * @callabck(function): 加载完成的回调，接收加载的js文本和返回状态，批量加载只返回最后一个js文本
  * @option(object): 若callback是object格式将被作为option使用
  * @option.css(boolean/string/array): 是否依赖css，默认false，<br>传入true将加载与js同名同级css文件
  * @option.jquery(boolean): 被加载脚本是否依赖jquery，默认false
  * @option.rely(boolen): 批量加载的js是否保持线性顺序，默认false，将同时请求
  */
  //利用线性加载特定版本jquery的例子
  base.getScript(['http://apps.bdimg.com/libs/jquery/1.7.1/jquery.min.js', seajs.root + '/test/test2'], function(data) {
      var $ = window.jQuery;
      $.fn.test2();
      }, {
      rely: true
    });
  //也可以写成base.getScript(file, callabck)快捷方式，百度地图示例：
  base.getScript('http://api.map.baidu.com/getscript?v=2.0&ak=D1DX6yGc5HGh28jtaAwNzcBi', function() {
    var theBody = document.getElementsByTagName('body')[0];
    theBody.style.height='600px';
    theBody.setAttribute('id','content');
    var map = new BMap.Map("content");
    var point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);
    window.setTimeout(function() {
      map.panTo(new BMap.Point(116.409, 39.918));
    }, 2000);
  })
                                    </code>
                                  </pre>
                                </td>
                              </tr>
                              
                           </table>
                        </td>
                    </tr>
                    <tr id="Bdshare（百度分享）">
                        <td>bdshare</td>
                        <td>
                            <h5>描述</h5>
                            <p>封装百度分享，扩展分享按钮html自定义能力，接收通用设置和share设置，都是标准的百度分享参数格式，获取HTML代码请点<a href="http://share.baidu.com/code" target="_blank">这里</a>。</p>
                            <h5>多终端</h5>
                            <p>移动端不建议使用</p>
                            <h5>配置</h5>
                            <table class="table table-hover">
                                <tr>
                                    <th>commonConfig</th>
                                    <td>通用设置，可选，提供onBeforeClick接口用于点击分享按钮时动态更改配置，详见<a href="http://share.baidu.com/code/advance#config-common" target="_blank">通用设置</a>。</td>
                                </tr>
                                <tr>
                                    <th>shareConfig</th>
                                    <td>share设置，可选，允许对多组分享通过data-tag标记做不同的配置，当只有一组分享时可以直接传入json格式，不传参将使用百度默认值，详见<a href="http://share.baidu.com/code/advance#config-share" target="_blank">分享按钮设置</a>。</td>
                                </tr>
                            </table>
                            <h5>注意</h5>
                            <ol>
                                <li>全站的百度分享代码必须commonjs中通过一次require.async集中配置，多次配置只有最后一次会生效；</li>
                                <li>分享按钮a标签HTML自定义，最多只允许增加一层DOM，否则点击事件不生效。</li>
                            </ol>
                            <h5>示例</h5>
                            <pre>
                                <code>
   &lt;!-- 如果页面内有多组分享 --&gt;
   &lt;div class=&quot;bdsharebuttonbox&quot; data-tag=&quot;share_1&quot; data-sharetitle=&quot;自定义分享标题&quot;&gt;
      &lt;a class=&quot;bds_mshare&quot; data-cmd=&quot;mshare&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_qzone&quot; data-cmd=&quot;qzone&quot; href=&quot;#&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_tsina&quot; data-cmd=&quot;tsina&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_baidu&quot; data-cmd=&quot;baidu&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_renren&quot; data-cmd=&quot;renren&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_tqq&quot; data-cmd=&quot;tqq&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_more&quot; data-cmd=&quot;more&quot;&gt;更多&lt;/a&gt;
      &lt;a class=&quot;bds_count&quot; data-cmd=&quot;count&quot;&gt;&lt;/a&gt;
   &lt;/div&gt;
   &lt;div class=&quot;bdsharebuttonbox&quot; data-tag=&quot;share_2&quot;&gt;
      &lt;a class=&quot;bds_mshare&quot; data-cmd=&quot;mshare&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_qzone&quot; data-cmd=&quot;qzone&quot; href=&quot;#&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_tsina&quot; data-cmd=&quot;tsina&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_baidu&quot; data-cmd=&quot;baidu&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_renren&quot; data-cmd=&quot;renren&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_tqq&quot; data-cmd=&quot;tqq&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_more&quot; data-cmd=&quot;more&quot;&gt;更多&lt;/a&gt;
      &lt;a class=&quot;bds_count&quot; data-cmd=&quot;count&quot;&gt;&lt;/a&gt;
   &lt;/div&gt;
                              </code>
                            </pre>
                            <pre>
                                <code>
   //多组分享js         
   require.async('bdshare',function(bdshare){
       bdshare({
        //如果不需要从页面获取分享内容不要加onBeforeClick这一段
        onBeforeClick: function(cmd, config) {
          var e = (arguments.callee.caller.arguments[0] || window.event).event;
          config.bdText = $(e.target).parents('.bdsharebuttonbox').data('sharetitle');
          //更改标题，所取的值若为undefined将默认使用页面title
          config.bdDesc = 'shareTo ' + cmd;
          //cmd是分享目标id，例如人人的id是"renren"，可以用来识别具体分享到哪里
          config.bdPic = 'http://temp.im/100x100/';
          //更改分享信息的缩略图
          config.bdUrl = window.location.href + '?shareTo=' + cmd;
          //更改分享信息的url

          return config; //返回新的config
        }
       },[{
            tag : 'share_1',  
            bdSize : 16,      //图标尺寸, 16｜24｜32
            bdStyle : '1'     //图标类型, 0｜1｜2

         },
         {
            tag : 'share_2',
            bdSize : 32,
            bdStyle: 2
         }])
   });
                               </code>
                            </pre>
                        </td>
                    </tr>
                    <tr id="Box（弹窗）">
                        <td>box</td>
                        <td>
                            <h5>描述</h5>
                            <p>弹窗插件，具有弹出任意内容、提醒、消息、询问等模式。</p>
                            <h5>多终端</h5>
                            <p>支持</p>
                            <h5>方法</h5>
                            <table class="table">
                                <tr>
                                    <th>$.box.hide([boxid])</th>
                                    <td>
                                        <p>关闭弹窗，接收弹窗id为参数，无参数将关闭页面上所有弹窗</p>
                                        <pre>
                                            <code>
    $.box.hide(boxid);
                                        </code>
                                      </pre>
                                    </td>
                                </tr>
                                <th>$.box.setSize(boxid,[config])</th>
                                <td>
                                    <p>box尺寸重设，接收弹窗id和尺寸配置为参数，无配置时将重计算指定弹窗的尺寸</p>
                                    <pre>
                                        <code>
    $.box.setSize(boxid,{
      width:100,
      height:68
    });
                                        </code>
                                      </pre>
                                    </td>
                                </tr>
                                <tr>
                                    <th>$.box.alert()</th>
                                    <td>
                                        <p>提醒弹窗，弹出短信息，有一个确认按钮</p>
                                        <pre>
                                            <code>
  /*
  * @param.message[string]:消息内容
  * @param.callback[function]:确认按钮的回调
  * @param.options[object]:其他参数
  * @return: boxID
  */
  $.box.alert( message, [callback], [options] );
                                        </code>
                                      </pre>
                                    </td>
                                </tr>
                                <tr>
                                    <th>$.box.msg()</th>
                                    <td>
                                        <p>消息弹窗，在屏幕顶部显示一条全局消息，特有一个color配置用来定义消息请景色，可选"info，primary，success，warning，danger"</p>
                                        <pre>
                                            <code>
  /*
  * @param.message[string]:消息内容
  * @param.options[object]:其他参数
  * @return: boxID
  */
  $.box.msg( message, [options] );
                                        </code>
                                      </pre>
                                    </td>
                                </tr>
                                <tr>
                                    <th>$.box.confirm()</th>
                                    <td>
                                        <p>确认弹窗，弹出一条确认信息，有一个确认按钮和一个取消按钮</p>
                                        <pre>
                                            <code>
  /*
  * @param.message[string]:消息内容
  * @param.sureCall[function]:确认按钮的回调
  * @param.cancelCall[function]:取消按钮的回调
  * @param.options[object]:其他参数
  * @return: boxID
  */
  $.box.confirm( message, [sureCall], [cancelCall], [options] );
                                        </code>
                                      </pre>
                                    </td>
                                </tr>
                                <tr>
                                    <th>$.box.ajax()</th>
                                    <td>
                                        <p>ajax弹窗，弹出ajax获得的内容</p>
                                        <pre>
                                            <code>
  /*
  * @param.uri[string]:ajax地址
  * @param.params[object]:ajax参数
  * @param.options[object]:其他参数
  * @return: boxID
  */
  $.box.ajax( uri, [params], [options] );
                                        </code>
                                      </pre>
                                    </td>
                                </tr>
                                <tr>
                                    <th>$.box.ifram()</th>
                                    <td>
                                        <p>弹出一个ifram窗口</p>
                                        <pre>
                                            <code>
  /*
  * @param.uri[string]:ifram页面地址
  * @param.params[object]:ifram参数，包括name，width，height
  * @param.options[object]:其他参数
  * @return: boxID
  */
  $.box.ifram( uri, [params], [options] );
                                        </code>
                                      </pre>
                                    </td>
                                </tr>
                                <tr>
                                    <th>$.box.img()</th>
                                    <td>
                                        <p>弹出一张图片</p>
                                        <pre>
                                            <code>
  /*
  * @param.src[string]:图片地址
  * @param.options[object]:其他参数
  * @return: boxID
  */
  $.box.img( src, [options] );
                                        </code>
                                      </pre>
                                    </td>
                                </tr>
                            </table>
                        <h5>配置</h5>
                        <table class="table table-hover">
                            <tr>
                                <th>top</th>
                                <td>默认无，若有值将固定弹窗据window顶部距离</td>
                            </tr>
                            <tr>
                                <th>title</th>
                                <td>默认“对话框”，对话框标题html</td>
                            </tr>
                            <tr>
                                <th>oktext</th>
                                <td>修改【确定】按钮的文字</td>
                            </tr>
                            <tr>
                                <th>canceltext</th>
                                <td>修改【取消】按钮的文字</td>
                            </tr>
                            <tr>
                                <th>shut</th>
                                <td>默认“×”，关闭按钮html，传入false将没有关闭按钮</td>
                            </tr>
                            <tr>
                                <th>width</th>
                                <td>默认auto，弹窗宽度</td>
                            </tr>
                            <tr>
                                <th>height</th>
                                <td>默认高度，弹窗高度</td>
                            </tr>
                            <tr>
                                <th>layout</th>
                                <td>默认true，是否包含边框</td>
                            </tr>
                            <tr>
                                <th>setposi</th>
                                <td>默认true，无layout的情况下，是否自动添加定位样式，手动定位需要设为false</td>
                            </tr>
                            <tr>
                                <th>bar</th>
                                <td>默认true，是否显示标题栏</td>
                            </tr>
                            <tr>
                                <th>bg</th>
                                <td>默认true，是否显示背景层</td>
                            </tr>
                            <tr>
                                <th>fix</th>
                                <td>默认true，弹窗是否框固定在页面上</td>
                            </tr>
                            <tr>
                                <th>bgclose</th>
                                <td>默认true，是否点击背景层关闭</td>
                            </tr>
                            <tr>
                                <th>drag</th>
                                <td>默认false，是否可拖拽</td>
                            </tr>
                            <tr>
                                <th>protect</th>
                                <td>默认false，若为true，关闭后会将弹出的元素<code>appendTo('body')</code></td>
                            </tr>
                            <tr>
                                <th>delay</th>
                                <td>默认0，弹窗自动关闭时间, 0和负值不触发</td>
                            </tr>
                            <tr>
                                <th>lang</th>
                                <td>默认0，语言选择，0：中文 1：英文</td>
                            </tr>
                            <tr>
                                <th>hook</th>
                                <td>自定义样式钩子，用于给弹窗附加class修改样式，默认无</td>
                            </tr>
                            <tr>
                                <th>color</th>
                                <td>$.box.msg方法的情景色，使用的是ui.css提供的几种背景色，默认info，可选info，primary，success，warning，danger</td>
                            </tr>
                            <tr>
                                <th>onshow(box)</th>
                                <td>默认无，弹窗打开事件，接收弹窗DOM对象为参数</td>
                            </tr>
                            <tr>
                                <th>onclose()</th>
                                <td>默认无，弹窗关闭事件</td>
                            </tr>
                        </table>
                        <h5>返回</h5>
                        <table class="table">
                            <tr>
                                <th>boxid</th>
                                <td>
                                    <p>每次$.box调用都将返回一个boxid，用于$.box.hide()的参数时，可关闭本弹窗实例</p>
                                    <p><code>var mybox = $.box(...);</code></p>
                                </td>
                            </tr>
                        </table>
                        <h5>示例</h5>
                        <pre>
                            <code>
  &lt;style&gt;
  button{margin:.5em;}
  .myextclass .wrap_bar{background:green;}
  &lt;/style&gt;

  &lt;!-- html --&gt;
  &lt;form class=&quot;demo hide&quot; style=&quot;padding:20px;&quot;&gt;
    &lt;p&gt;
      &lt;label&gt;姓名：&lt;/label&gt;&lt;input type=&quot;text&quot;&gt;
    &lt;/p&gt;
    &lt;p&gt;
      &lt;label&gt;电话：&lt;/label&gt;&lt;input type=&quot;tel&quot;&gt;
    &lt;/p&gt;
    &lt;p&gt;
      &lt;label&gt;邮箱：&lt;/label&gt;&lt;input type=&quot;mail&quot;&gt;
    &lt;/p&gt;
    &lt;p class=&quot;tc&quot; style=&quot;margin-top:1em&quot;&gt;
      &lt;button&gt;填好了&lt;/button&gt;
    &lt;/p&gt;
  &lt;/form&gt;

  &lt;div&gt;&lt;button class=&quot;btn btn-default boxDom&quot;&gt;弹出Dom&lt;/button&gt;&lt;/div&gt;
  &lt;div&gt;&lt;button class=&quot;btn btn-default boxMsg&quot;&gt;提示&lt;/button&gt;&lt;/div&gt;
  &lt;div&gt;&lt;button class=&quot;btn btn-default boxAlert&quot;&gt;警告&lt;/button&gt;&lt;/div&gt;
  &lt;div&gt;&lt;button class=&quot;btn btn-default boxConfirm&quot;&gt;询问&lt;/button&gt;&lt;/div&gt;
  &lt;div&gt;&lt;button class=&quot;btn btn-default boxAjax&quot;&gt;Ajax弹出内容&lt;/button&gt;&lt;/div&gt;
  &lt;div&gt;&lt;button class=&quot;btn btn-default boxIfram&quot;&gt;弹出ifram&lt;/button&gt;&lt;/div&gt;
  &lt;div&gt;&lt;button class=&quot;btn btn-default modal&quot;&gt;弹出一个模态自定义内容&lt;/button&gt;
  &lt;div&gt;&lt;button class=&quot;btn btn-default extclass&quot;&gt;添加自定义class&lt;/button&gt;&lt;/div&gt;
  &lt;div&gt;&lt;button class=&quot;btn btn-default boximg&quot;&gt;弹出图片&lt;/button&gt;&lt;/div&gt;
                      </code>
                    </pre>
                    <pre>
                        <code>

    //支持全局修改默认配置，全局配置必须在require('module name')，
    //例如全局语言改为英文
    window.boxGlobal = {lang:1};

    //js
    require('box');

    $('.boxDom').on('click',function(){
      $.box( $('.demo') );
    })
    
    $('.boxAlert').on('click',function(){
      $.box.alert('hello box!',function(){
        alert('alert的回调')
      });
    })
    
    $('.boxMsg').on('click',function(){
      $.box.msg('注意，这是一条测试信息！',{
        delay:3000
      });
    })

    $('.boxConfirm').on('click',function(){
      $.box.confirm('hello box!', function(){
        alert('确定回调');
      }, function(){
        alert('取消回调');
      })
    })
    
    $('.boxAjax').on('click',function(){
      $.box.ajax(seajs.root + '/test/ajax.php', { 
        param: "param1" //Ajax参数
      })
    })
    
    $('.boxIfram').on('click',function(){
      var myifr = $.box.ifram('/test/iframCloseTest.html',{
        name: "closeTestIfram",  //ifram name，默认空（不是弹窗标题）
        width: 320,     //iframe宽，默认640
        height: 240     //iframe高，默认480
      });
      //顺便写个关闭方法，用于从ifram内调用关闭自身
      window.closeMyIfr = function(){
        $.box.hide(myifr);
        window.closeMyIfr = null;
      }
    })

    $('.modal').on('click',function(){
      $.box('&lt;i class=&quot;ion rotation&quot; style=&quot;font-size:24px&quot;&gt;&amp;#xe646;&lt;/i&gt;',{
        layout:false,
        bgclose:false,
        delay:6e3
      })
    })

    $('.extclass').on('click',function(){
      $.box('通过附加自定义class修改了弹窗样式',{
        hook: "myextclass"
      })
    })

    $('.boximg').on('click',function(){
      var imgBox = $.box.img('http://7xnt8z.com1.z0.glb.clouddn.com/view0.jpg',{
        onshow:function($this){
          $this.on('click',function(){
            $.box.hide(imgBox);
          });
        }
      });
    })

                        </code>
                    </pre>
                    </td>
                </tr>
                <tr id="City-select（地区选择器）">
                    <td>city-select</td>
                    <td>
                        <h5>描述</h5>
                        <p>封装地区选择器插件，自带模板和样式，通过触发元素弹出选择器浮层。</p>
                        <h5>多终端</h5>
                        <p>不支持</p>
                        <h5>配置</h5>
                        <table class="table table-hover">
                            <tr>
                                <th>data</th>
                                <td>省市区数据，支持数组或能返回指定格式的地址字符串，格式如下：
                                    <code>
[{"name":"北京","id":"001","city":[{"name":"北京","id":"001","area":[{"name":"东城区","id":"001"},{"name":"西城区","id":"002"},{"name":"崇文区","id":"003"},{"name":"宣武区","id":"004"},{"name":"朝阳区","id":"005"}]}]},{"name":"河北","id":"002","city":[{"name":"石家庄","id":"002","area":[{"id":"002","name":"长安区"},{"id":"002","name":"桥东区"},{"id":"002","name":"桥西区"},{"id":"002","name":"新华区"},{"id":"002","name":"郊  区"}]}]},{"name":"台湾","id":"003","city":[{"name":"台湾","id":"003","area":[{"id":"003","name":"台北市"},{"id":"003","name":"高雄市"},{"id":"003","name":"台北县"},{"id":"003","name":"桃园县"}]},{"name":"其他","id":"004","area":[{"name":"其他","id":"004"}]}]}]
                                    </code>
                                </td>
                            </tr>
                            <tr>
                                <td>callback</td>
                                <td>选择结束回调函数，接收选择结果为参数，结果格式为所选省市区三级数据组成的数组：
                                    <code>
[{"name":"北京","id":"001","index":0},{"name":"北京","id":"001","index":0},{"name":"东城区","id":"001","index":0}]
                                    </code>
                                </td>
                            </tr>
                        </table>
                        <h5>示例</h5>
                        <pre>
                            <code>
&lt;!-- html --&gt;
&lt;div class=&quot;demo btn btn-default&quot;&gt;选择省市区&lt;/div&gt;
                            </code>
                          </pre>
                        <pre>
                        <code>
//js
require('city-select');
$('.demo').citySelect({
  data:[{"name":"北京","id":"001","city":[{"name":"北京","id":"001","area":[{"name":"东城区","id":"001"},{"name":"西城区","id":"002"},{"name":"崇文区","id":"003"},{"name":"宣武区","id":"004"},{"name":"朝阳区","id":"005"}]}]},{"name":"河北","id":"002","city":[{"name":"石家庄","id":"002","area":[{"id":"002","name":"长安区"},{"id":"002","name":"桥东区"},{"id":"002","name":"桥西区"},{"id":"002","name":"新华区"},{"id":"002","name":"郊  区"}]}]},{"name":"台湾","id":"003","city":[{"name":"台湾","id":"003","area":[{"id":"003","name":"台北市"},{"id":"003","name":"高雄市"},{"id":"003","name":"台北县"},{"id":"003","name":"桃园县"}]},{"name":"其他","id":"004","area":[{"name":"其他","id":"004"}]}]}],
  callback:function(result){
    var address = '';
    $.each(result,function(i,e){
        address+=e.name
    });
    $('body').append('&lt;p&gt;'+address+'&lt;/p&gt;')
  }
});
                      </code>
                     </pre>
                    </td>
                </tr>
                <tr id="Countdown（倒计时）">
                    <td>countdown</td>
                    <td>
                        <h5>描述</h5>
                        <p>倒计时插件，通过重写render方法可自定义显示格式，封装自<a href="https://github.com/rendro/countdown" target="_blank">countdown</a>。</p>
                        <h5>多终端</h5>
                        <p>支持</p>
                        <h5>注意</h5>
                        <p>标准日期对象的月份设置范围是0~11，不是1~12</p>
                        <h5>配置</h5>
                        <table class="table table-hover">
                            <tr>
                                <th>begin</th>
                                <td>开始时间，可选，默认本机时间，标准日期格式，如<code>new Date(2089,01,05,02,25,00)</code>，或<code>new Date("2089/01/05 02:25:00")</code>，或<code>new Date("2089-01-05 02:25:00")</code></td>
                            </tr>
                            <tr>
                                <th>date</th>
                                <td>结束时间，标准日期格式，默认 <code>new Date(2089,01,05,02,25,00)</code></td>
                            </tr>
                            <tr>
                                <th>refresh</th>
                                <td>刷新率，单位ms，默认1000，即按秒刷新</td>
                            </tr>
                            <tr>
                                <th>offset</th>
                                <td>偏移量，单位ms，用于纠正时区偏差</td>
                            </tr>
                            <tr>
                                <th>onEnd</th>
                                <td>倒计时结束回调函数，默认无</td>
                            </tr>
                            <tr>
                                <th>render</th>
                                <td>渲染函数，接收两个参数分别是当前DOM和日期</td>
                            </tr>
                        </table>
                        <h5>示例</h5>
                        <pre>
                            <code>
  &lt;!-- html --&gt;
  &lt;div class=&quot;demo&quot;&gt;&lt;/div&gt;
                            </code>
                          </pre>
                        <pre>
                            <code>
   //js
   var endData = new Date(),
       endMill = endData.getTime()+1000*60*60*24;
   endData.setTime(endMill);
   require.async('countdown', function() {
      $('.demo').Countdown({
         date: endData,
         render: function($this, date) { 
            $this.html(date.years + " 年, " +
               date.days + " 天, " +
               date.hours + " 时, " +
               date.min + " 分 " +
               date.sec + " 秒"
            )
         }
      })
   })
                            </code>
                        </pre>
                    </td>
                </tr>
                <tr id="Counter（加减计数器）">
                    <td>counter</td>
                    <td>
                        <h5>描述</h5>
                        <p>封装加减计数器插件，将触发元素插入/替换一个加减计数器，自带模板和两种样式</p>
                        <h5>多终端</h5>
                        <p>不支持</p>
                        <h5>配置</h5>
                        <table class="table table-hover">
                            <tr>
                                <th>mode</th>
                                <td>默认"replace"，生成模式，可选"insert"</td>
                            </tr>
                            <tr>
                                <td>init</td>
                                <td>默认0，初始数量</td>
                            </tr>
                            <tr>
                                <td>minbuycount</td>
                                <td>默认1，每次加减数量</td>
                            </tr>
                            <tr>
                                <td>max</td>
                                <td>默认无限大，最大数量</td>
                            </tr>
                            <tr>
                                <td>style</td>
                                <td>默认'default'，可选'inline'，计数器样式</td>
                            </tr>
                            <tr>
                                <td>callback</td>
                                <td>默认无，计数器操作回调，@param ($input)</td>
                            </tr>
                        </table>
                        <h5>示例</h5>
                        <pre>
                            <code>
&lt;!-- html --&gt;
&lt;div class=&quot;demo&quot;&gt;&lt;/div&gt;
                            </code>
                          </pre>
                        <pre>
                            <code>
//js
require('counter');
$('.demo').counter({
  callback:function($input){
    $('body').append('&lt;p&gt;'+$input.val()+'&lt;/p&gt;')
  }
})
                        </code>
                     </pre>
                    </td>
                </tr>
                <tr id="DatePicker（日期选择器）">
                    <td>DatePicker</td>
                    <td>
                        <h5>描述</h5>
                        <p>jQuery日期选择器插件，支持中英文，来自<a href="https://github.com/fengyuanchen/datepicker" target="_blank">fengyuanchen/datepicker</a></p>
                        <h5>多终端</h5>
                        <p>支持</p>
                        <h5>配置</h5>
                        <table class="table table-hover">
                            <tr>
                                <th>autoshow</th>
                                <td>布尔值，默认false，初始化后立即显示日历</td>
                            </tr>
                            <tr>
                                <th>autohide</th>
                                <td>布尔值，默认false，选择日期后自动关闭日历</td>
                            </tr>
                            <tr>
                                <th>autopick</th>
                                <td>布尔值，默认false，初始化后自动选中当前日期</td>
                            </tr>
                            <tr>
                                <th>inline</th>
                                <td>布尔值，默认false，是否以内嵌模式显示日历</td>
                            </tr>
                            <tr>
                                <th>container</th>
                                <td>元素或字符串，默认null，指定放置内嵌日历的元素或元素选择器</td>
                            </tr>
                            <tr>
                                <th>trigger</th>
                                <td>元素或字符串，默认null，指定显示日历的触发器</td>
                            </tr>
                            <tr>
                                <th>language</th>
                                <td>字符串，默认''，可选'zh-CN'</td>
                            </tr>
                            <tr>
                                <th>format</th>
                                <td>字符串，默认'mm/dd/yyyy'</td>
                            </tr>
                            <tr>
                                <th>date</th>
                                <td>日期数据或字符串，默认null，初始日期，不设置选择当天</td>
                            </tr>
                            <tr>
                                <th>startDate</th>
                                <td>日期数据或字符串，默认null，设置可选的起始日期</td>
                            </tr>
                            <tr>
                                <th>endDate</th>
                                <td>日期数据或字符串，默认null，设置可选的终止日期</td>
                            </tr>
                            <tr>
                                <th>startView</th>
                                <td>数值，默认0，设置初始化界面，可选0: days；1: months；2: years</td>
                            </tr>
                            <tr>
                                <th>weekStart</th>
                                <td>数值，默认0，设置每周的起始天，可选0: Sunday；1: Monday；2: Tuesday；3: Wednesday；4: Thursday；5: Friday；6: Saturday</td>
                            </tr>
                            <tr>
                                <th>yearFirst</th>
                                <td>布尔值，默认false，界面上将年显示到月之前</td>
                            </tr>
                            <tr>
                                <th>yearSuffix</th>
                                <td>字符型，默认''，年份后缀，例如可以设置为'年'</td>
                            </tr>
                            <tr>
                                <th>days</th>
                                <td>数组，默认<code>['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']</code>，设置一周每天称谓</td>
                            </tr>
                            <tr>
                                <th>daysShort</th>
                                <td>数组，默认<code>['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']</code>，一周每天称谓短版</td>
                            </tr>
                            <tr>
                                <th>daysMin</th>
                                <td>数组，默认<code>['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']</code>，一周每天称谓更短</td>
                            </tr>
                            <tr>
                                <th>months</th>
                                <td>数组，默认<code>['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']</code>，月份名称</td>
                            </tr>
                            <tr>
                                <th>monthsShort</th>
                                <td>数组，默认<code>['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']</code>，月份短称谓</td>
                            </tr>
                            <tr>
                                <th>itemTag</th>
                                <td>字符串，默认'li'，标签名</td>
                            </tr>
                            <tr>
                                <th>mutedClass</th>
                                <td>字符串，默认'muted'，设定class前缀</td>
                            </tr>
                            <tr>
                                <th>pickedClass</th>
                                <td>字符串，默认'picked'，定义选中日期class</td>
                            </tr>
                            <tr>
                                <th>disabledClass</th>
                                <td>字符串，默认'disabled'，定义不可用日期class</td>
                            </tr>
                            <tr>
                                <th>offset</th>
                                <td>数值，默认10，日期弹出位置距离元素的距离，单位px</td>
                            </tr>
                            <tr>
                                <th>zIndex</th>
                                <td>数值，默认1，日期弹窗的z-index值</td>
                            </tr>
                            <tr>
                                <th>filter</th>
                                <td>函数，默认null，例如
                                    <pre>
                                        <code>
$().datepicker({
  filter: function(date) {
    if (date.getDay() === 0) {
      return false; // Disable all Sundays
    }
  }
});
                                    </code>
                                  </pre>
                                </td>
                            </tr>
                            <tr>
                                <th>show</th>
                                <td>函数，默认null，日历显示的回调</td>
                            </tr>
                            <tr>
                                <th>hide</th>
                                <td>函数，默认null，日历隐藏的回调</td>
                            </tr>
                            <tr>
                                <th>pick</th>
                                <td>函数，默认null，选择日期的回调，函数event中date属性可以获得选中的日期</td>
                            </tr>
                        </table>
                        <h5>方法</h5>
                        <p>见：<a href="https://github.com/fengyuanchen/datepicker/blob/v0.3.1/README.md#table-of-contents" target="_blank">官方文档</a></p>
                        <h5>示例</h5>
                        <pre>
                            <code>
&lt;p&gt; 普通 &lt;/p&gt;
&lt;input class=&quot;datepicker&quot;&gt;
&lt;p&gt; 内嵌 &lt;/p&gt;
&lt;input class=&quot;datepicker2&quot;&gt;

&lt;div style="height:300px;width:300px;border:1px solid #ccc" class=&quot;main&quot;&gt;&lt;/div&gt;
                          </code>
                        </pre>
                        <pre>
                            <code>
require('datepicker');

$('.datepicker').datepicker({
  language: 'zh-CN'
});

$('.datepicker2').datepicker({
  inline: true,
  container: '.main'
});

                          </code>
                        </pre>
                    </td>
                </tr>
                <tr id="Drag（拖拽）">
                    <td>drag</td>
                    <td>
                        <h5>描述</h5>
                        <p>拖拽插件，拖拽元素大于拖拽范围或者小于拖拽范围都可以，两种情况都支持边缘检测</p>
                        <h5>多终端</h5>
                        <p>不支持</p>
                        <h5>配置</h5>
                        <table class="table table-hover">
                            <tr>
                                <th>wrap</th>
                                <td>指定拖拽范围，默认选择父元素</td>
                            </tr>
                            <tr>
                                <th>overflow</th>
                                <td>是否允许超出边缘，默认不允许</td>
                            </tr>
                            <tr>
                                <th>dragStart</th>
                                <td>拖拽开始回调，接受拖拽元素为参数</td>
                            </tr>
                            <tr>
                                <th>drag</th>
                                <td>拖拽过程回调，接受拖拽元素为参数</td>
                            </tr>
                            <tr>
                                <th>dragEnd</th>
                                <td>拖拽结束回调，接受拖拽元素为参数</td>
                            </tr>
                        </table>
                        <h5>示例</h5>
                        <pre>
                            <code>
  &lt;!--html--&gt;
  &lt;div class=&quot;drag&quot; style=&quot;width:100px;height:100px;background:#434343;&quot;&gt;&lt;/div&gt;
                            </code>
                        </pre>
                        <pre>
                            <code>
  //js
  require('drag');
  $('.drag').drag({
    dragStart:function($this){
      console.log(1)
    },
    dragEnd:function($this){
      console.log(2)
    }
  });
                        </code>
                      </pre>
                    </td>
                </tr>
                <tr id="Easing（animate动画扩展）">
                    <td>easing</td>
                    <td>
                        <h5>描述</h5>
                        <p>扩展jquery.animate动画效果，来自<a href="http://gsgd.co.uk/sandbox/jquery/easing/" target="_blank">jquery.easing.js</a>，被<code>scroll-col</code>和<code>scroll-row</code>插件依赖</p>
                        <p>效果包括：linear, swing, jswing, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce</p>
                        <h5>多终端</h5>
                        <p>不推荐</p>
                        <h5>示例</h5>
                        <pre>
                            <code>
  require('easing');

  $(element).slideUp({
    duration: 1000, 
    easing: method, 
    complete: callback
  });

  $(element).animate({
    height:100
  },{
    duration: 1000, 
    easing: method, 
    complete: callback
  });
                            </code>
                        </pre>
                    </td>
                </tr>
                <tr id="Echarts（百度Echarts）">
                    <td>Echarts</td>
                    <td>
                        <h5>描述</h5>
                        <p>封装百度Echarts 3.0，详细用法见<a href="http://echarts.baidu.com/tutorial.html" target="_blank">官方文档</a></p>
                        <h5>多终端</h5>
                        <p>支持</p>
                        <h5>示例</h5>
                        <pre>
                            <code>
  &lt;div id=&quot;main&quot; style=&quot;width: 600px;height:400px;&quot;&gt;&lt;/div&gt;
                         </code>
                       </pre>
                        <pre>
                            <code>
  var echarts = require('echarts');
  // 基于准备好的DOM，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));

  // 指定图表的配置项和数据
  var option = {
      title: {
          text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
          data:['销量']
      },
      xAxis: {
          data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      },
      yAxis: {},
      series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
      }]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
                         </code>
                       </pre>
                    </td>
                </tr>
                <tr id="Etpl（模板引擎）">
                    <td>etpl</td>
                    <td>
                        <h5>描述</h5>
                        <p>模板引擎，用于相对大量的视图渲染，详见<a href="https://github.com/ecomfe/etpl" target="_blank">项目主页</a></p>
                        <h5>多终端</h5>
                        <p>支持</p>
                        <h5>示例</h5>
                        <pre>
                            <code>
  &lt;!-- html --&gt;
  &lt;div class=&quot;demo&quot;&gt;&lt;/div&gt;
                          </code>
                        </pre>
                        <pre>
                            <code>
  var etpl=require('etpl');
  var render = etpl.compile('Hello ${name}!');
  var text = render({ name: 'etpl' });
  $('.demo').html(text);
                          </code>
                        </pre>
                    </td>
                </tr>
                <tr id="Fastclick（移动端快速点击）">
                    <td>fastclick</td>
                    <td>
                        <h5>描述</h5>
                        <p>移动端避免click事件300ms延迟，可以对指定元素使用，也可以整个页面使用</p>
                        <h5>多终端</h5>
                        <p>支持</p>
                        <h5>示例</h5>
                        <pre>
                            <code>
  &lt;div class=&quot;test btn btn-success&quot;&gt;click&lt;/div&gt;
  &lt;div class=&quot;test2 btn btn-warning&quot;&gt;click&lt;/div&gt;
                          </code>
                        </pre>
                        <pre>
                            <code>
  var FastClick = require('fastclick');
  //FastClick.attach(document.body);
  FastClick.attach($('.test').get(0));
  $('.test').click(function(){
    alert('fast')
  })

  $('.test2').click(function(){
    alert('300ms')
  })
                          </code>
                        </pre>
                    </td>
                </tr>
                <tr id="Img-loaded（图片加载检测）">
                    <td>img-loaded</td>
                    <td>
                        <h5>描述</h5>
                        <p>对目标区域内图片做加载完成检测</p>
                        <h5>多终端</h5>
                        <p>支持</p>
                        <h5>示例</h5>
                        <pre>
                            <code>
  &lt;!--html--&gt;
  &lt;div class=&quot;demo&quot;&gt;
     &lt;ul&gt;
        &lt;li&gt;&lt;img src=&quot;http://lorempixel.com/442/548/?582&quot; &gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;http://lorempixel.com/405/406/?324&quot; &gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;http://lorempixel.com/374/330/?734&quot; &gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
                            </code>
                        </pre>
                        <pre>
                            <code>
  //js
  require('img-loaded');
  $('.demo').imagesLoaded(function(){
     alert('加载完成');
  })
                        </code>
                      </pre>
                    </td>
                </tr>
                <tr id="Img-ready（图片尺寸预取）">
                    <td>img-ready</td>
                    <td>
                        <h5>描述</h5>
                        <p>能在图片下载完成之前检测到图片真实尺寸，返回方法接受三个参数分别是图片地址、检测完成回调，下载完成回调</p>
                        <h5>多终端</h5>
                        <p>支持</p>
                        <h5>示例</h5>
                        <pre>
                            <code>
    &lt;!-- html --&gt;
    &lt;img id=&quot;demo&quot; src=&quot;http://lorempixel.com/442/548/?582&quot;&gt;
                            </code>
                        </pre>
                        <pre>
                            <code>
  var ready = require('img-ready');
  ready($('#demo').attr('src'), 
    function(width,height){
      $('body').append($('&lt;div&gt;预取width:'+width+' height:'+height+'&lt;/div&gt;'))
    }, function(width,height){
      $('body').append($('&lt;div&gt;加载完成！&lt;/div&gt;'));
    }
  )
                            </code>
                        </pre>
                    </td>
                </tr>
                <tr id="Instantclick（链接预加载）">
                    <td>instantclick</td>
                    <td>
                        <h5>描述</h5>'
                        <p>链接预加载插件，详情查看<a href="#instantclick">【链接预加载】</a></p>
                    </td>
                </tr>
                <tr id="Lazyload（图片懒加载）">
                    <td>lazyload</td>
                    <td>
                        <h5>描述</h5>
                        <p>图片懒加载插件，用于滚动时加载视窗内的元素背景或图片，懒加载元素或图片需要用<code>data-lazy</code>属性存贮图片地址。</p>
                        <h5>多终端</h5>
                        <p>支持</p>
                        <h5>示例</h5>
                        <pre>
                            <code>
  &lt;style&gt;
  .demo p{float:left; margin:20px; width:200px; height: 200px; background:#eee;background-position:center;}
  &lt;/style&gt;
                            </code>
                            <code>
  &lt;div class=&quot;demo&quot;&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/800x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/801x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/802x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/803x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/804x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/805x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/806x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/807x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/808x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/809x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/810x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/811x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/812x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/813x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/814x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/815x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/816x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/817x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/818x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/819x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/820x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/821x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/822x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/823x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/824x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/825x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/826x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/827x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/828x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/829x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/830x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/831x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/832x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/833x600/&quot; &gt;&lt;/p&gt;
    &lt;p&gt;&lt;img data-lazy=&quot;http://temp.im/834x600/&quot; &gt;&lt;/p&gt;
    &lt;p data-lazy=&quot;http://temp.im/835x600/&quot;&gt; element &lt;/p&gt;
  &lt;/div&gt;
                                </code>
                              </pre>
                            <pre>
                            <code>
  //js
  require('lazyload');
  $('.demo').lazyload();
                            </code>
                        </pre>
                    </td>
                </tr>
                <tr id="Marquee（跑马灯）">
                    <td>marquee</td>
                    <td>
                        <h5>描述</h5>
                        <p>跑马灯插件（横竖方向的匀速循环滚动）
                            <h5>多终端</h5>
                            <p>支持</p>
                            <h5>配置</h5>
                            <table class="table">
                                <tr>
                                    <th>direction</th>
                                    <td>滚动方向，可选"left/top"，默认"top"</td>
                                </tr>
                                <tr>
                                    <th>duration</th>
                                    <td>单次滚动时长，单位ms，默认5000</td>
                                </tr>
                                <tr>
                                    <th>pauseOnHover </th>
                                    <td>悬停暂停，默认true</td>
                                </tr>
                            </table>
                            <h5>示例</h5>
                            <pre>
                                <code>
    &lt;style&gt;
    .marquee{height:150px;border:1px solid blue;}
    .marquee2{width:150px;border:1px solid red;}
    &lt;/style&gt;
                                </code>
                                <code>
  &lt;div class='marquee'&gt;
    &lt;p&gt; cont1 &lt;/p&gt;
    &lt;p&gt; cont2 &lt;/p&gt;
    &lt;p&gt; cont3 &lt;/p&gt;
    &lt;p&gt; cont4 &lt;/p&gt;
    &lt;p&gt; cont5 &lt;/p&gt;
    &lt;p&gt; cont6 &lt;/p&gt;
    &lt;p&gt; cont7 &lt;/p&gt;
    &lt;p&gt; cont8 &lt;/p&gt;
    &lt;p&gt; cont9 &lt;/p&gt;
  &lt;/div&gt;
  &lt;div class='marquee2'&gt;
    这是一段测试文字这是一段测试文字这是一段测试文字这是一段测试文字!!
  &lt;/div&gt;
                              </code>
                            </pre>
                            <pre>
                                <code>
  require.async('marquee',function(){
    $('.marquee').marquee();
    $('.marquee2').marquee({
      direction:'left'
    });
  });
                            </code>
                        </pre>
                    </td>
                </tr>
                <tr id="Masonry（瀑布流）">
                    <td>masonry</td>
                    <td>
                        <h5>描述</h5>
                        <p>瀑布流插件，封装自<a href="http://masonry.desandro.com/" target="_blank">masonry</a></p>
                        <h5>多终端</h5>
                        <p>移动端不建议使用</p>
                        <h5>示例</h5>
                        <pre>
                            <code>
  &lt;style&gt; 
    /*css*/
    .item { width: 200px; margin:10px;}
  &lt;/style&gt;
                          </code>
                          <code>
  &lt;!--html--&gt;
  &lt;ul id=&quot;container&quot;&gt;
    &lt;li class=&quot;item&quot;&gt;
      &lt;img src=&quot;http://temp.im/200x100/&quot;&gt;
    &lt;/li&gt;
    &lt;li class=&quot;item&quot;&gt;
      &lt;img src=&quot;http://temp.im/200x400/&quot;&gt;
    &lt;/li&gt;
    &lt;li class=&quot;item&quot;&gt;
      &lt;img src=&quot;http://temp.im/200x300/&quot;&gt;
    &lt;/li&gt;
    &lt;li class=&quot;item&quot;&gt;
      &lt;img src=&quot;http://temp.im/200x600/&quot;&gt;
    &lt;/li&gt;
    &lt;li class=&quot;item&quot;&gt;
      &lt;img src=&quot;http://temp.im/200x100/&quot;&gt;
    &lt;/li&gt;
    &lt;li class=&quot;item&quot;&gt;
      &lt;img src=&quot;http://temp.im/200x400/&quot;&gt;
    &lt;/li&gt;
    &lt;li class=&quot;item&quot;&gt;
      &lt;img src=&quot;http://temp.im/200x300/&quot;&gt;
    &lt;/li&gt;
    &lt;li class=&quot;item&quot;&gt;
      &lt;img src=&quot;http://temp.im/200x600/&quot;&gt;
    &lt;/li&gt;
  &lt;/ul&gt;    
                            </code>
                        </pre>
                        <pre>
                            <code>
  require('masonry');
  require('img-loaded');

  var $container = $('#container'),win=$(window),loaded = true;
  //应用瀑布流
  $container.imagesLoaded(function(){
    $container.masonry({
      itemSelector: '.item'
    })
  });
  //滚动加载
  win.scroll(function scrollHandler(){
    if(loaded){
      var t=win.scrollTop(),
        h=win.height(),
        t1= $container.offset().top, 
        h1 =$container.outerHeight(true);

      if(t+h >= t1+h1){
        addItem(3);
      }
    }
  });
     
  //模拟动态加载数据
  function addItem(n) {
    loaded = false;
    var fragment =  '&lt;li class=&quot;item&quot;&gt;\
      &lt;img src=&quot;http://temp.im/200x100/&quot;&gt;\
    &lt;/li&gt;\
    &lt;li class=&quot;item&quot;&gt;\
      &lt;img src=&quot;http://temp.im/200x400/&quot;&gt;\
    &lt;/li&gt;\
    &lt;li class=&quot;item&quot;&gt;\
      &lt;img src=&quot;http://temp.im/200x300/&quot;&gt;\
    &lt;/li&gt;';
    for ( var i = 0; i &lt; n; i++ ) {
      fragment+=fragment;
    };
    $container.append($(fragment)).imagesLoaded(function(){
      $container.masonry("reload");
      loaded = true;
    });
  };
                            </code>
                        </pre>
                    </td>
                </tr>
                <tr id="Mousemenu（右键菜单）">
                    <td>mousemenu</td>
                    <td>
                        <h5>描述</h5>
                        <p>自定义鼠标右键，支持菜单内分组，调用格式为<code> $target.mousemenu( data, option )</code> </p>
                        <h5>多终端</h5>
                        <p>不支持</p>
                        <h5>配置</h5>
                        <table class="table table-hover">
                            <tr>
                                <th>name</th>
                                <td>将作为菜单id的后缀，以区别多组菜单，只有一组可省略</td>
                            </tr>
                            <tr>
                                <th>offsetX</th>
                                <td>默认2，单位px，菜单左上角距点击位置横向距离</td>
                            </tr>
                            <tr>
                                <th>offsetY</th>
                                <td>默认2，单位px，菜单左上角距点击位置纵向距离</td>
                            </tr>
                            <tr>
                                <th>textLimit</th>
                                <td>默认6，菜单项显示文字个数，超出显示省略号</td>
                            </tr>
                            <tr>
                                <th>beforeShow</th>
                                <td>菜单显示前回调</td>
                            </tr>
                            <tr>
                                <th>afterShow</th>
                                <td>菜单显示后回调</td>
                            </tr>
                            <tr>
                                <th>broke</th>
                                <td>用于点击时做条件判断，返回真值将阻止本次弹出</td>
                            </tr>
                        </table>
                        <h5>示例</h5>
                        <pre>
                            <code>
  &lt;style&gt;
  /*css*/
  .demo{height: 400px;border:1px solid #ccc;line-height: 400px;text-align: center;}
  &lt;/style&gt;
                              </code>
                              <code>
  &lt;!-- html --&gt;
  &lt;div class=&quot;demo&quot;&gt;测试区域&lt;/div&gt;
                              </code>
                            </pre>
                        <pre>
                            <code>
  require('mousemenu');
  $('.demo').mousemenu(
      [
          [{
              text: "组1-1",
              func: function() {
                alert("组1-1");
              }
          }, {
              text: "组1-2",
              func: function() {
                alert("组1-2");
              }
          }],
          [{
              text: "组2-1",
              func: function() {
                alert("组2-1");
              }
          }, {
              text: "组2-2",
              func: function() {
                alert("组2-2");
              }
          }]
      ], {
          //配置
      }
  );
                          </code>
                        </pre>
                    </td>
                </tr>
                <tr id="Mousetrap（按键监听）">
                    <td>mousetrap</td>
                    <td>
                        <h5>描述</h5>
                        <p>按键监听</p>
                        <h5>多终端</h5>
                        <p>不支持</p>
                        <h5>示例</h5>
                        <pre>
                            <code>
  &lt;!-- html --&gt;
  &lt;div class=&quot;demo&quot;&gt;
    &lt;p&gt;单按键：按&quot;a&quot;或&quot;?&quot;或&quot;esc&quot;&lt;/p&gt;
    &lt;p&gt;功能键：按&quot;ctrl+shift+k&quot;&lt;/p&gt;
    &lt;p&gt;多组按键绑定同一个事件：按&quot;command k&quot; 或者 &quot;control k&quot;&lt;/p&gt;
    &lt;p&gt;组合键：试试&quot;up up down down left right left right b a enter&quot;&lt;/p&gt;
  &lt;/div&gt;
                            </code>
                        </pre>
                        <pre>
                            <code>
  //js
  require.async('mousetrap',function(){
    // 单按键
    Mousetrap.bind('a', function() { 
      alert('a');
    });
    Mousetrap.bind(&quot;?&quot;, function() { 
      alert('show shortcuts!');
    });
    Mousetrap.bind('esc', function() { 
      //阻止浏览器默认事件
      if (e.preventDefault) {
          e.preventDefault();
      } else {
          e.returnValue = false;
      }
      alert('退出？');
    }, 'keyup');
   
    // 功能键
    Mousetrap.bind('ctrl+shift+k', function() { 
      alert('command shift k');
    });

    // 多组按键绑定相同事件
    Mousetrap.bind(['command+k', 'ctrl+k'], function() {
        alert('command k 或者 control k');
        return false; //取消系统默认事件
    });
   
    // 组合键
    Mousetrap.bind('up up down down left right left right b a enter', function() {
        alert("哇咔咔！");
    });
  });
                  
                            </code>
                        </pre>
                    </td>
                </tr>
                <tr id="Mousewheel（鼠标滚轮监听）">
                    <td>mousewheel</td>
                    <td>
                        <h5>描述</h5>
                        <p>鼠标滚轮监听，回调函数的event包含三个属性：deltaX，deltaY，deltaFactor；分别代表横向滚动方向，纵向滚动方向，滚动长度(不同浏览器下该值不一致)</p>
                        <h5>多终端</h5>
                        <p>不支持</p>
                        <h5>示例</h5>
                        <pre>
                            <code>
  &lt;style&gt;
  /*css*/
  .demo,.control{height: 200px;overflow: auto;border:1px solid #ccc;margin:10px;}
  &lt;/style&gt;
                            </code>
                            <code>
  &lt;!-- html --&gt;
  &lt;div class=&quot;demo&quot;&gt;
  滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;
  滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;
  滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;
  滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;
  滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;
  滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;
  滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;
  &lt;/div&gt;
  &lt;div class=&quot;control&quot;&gt;&lt;/div&gt;
                            </code>
                        </pre>
                        <pre>
                            <code>
  //js
  require('mousewheel');
  //开始监听
  $('.demo').on('mousewheel', function(event) {
      $('.control').append('&lt;p&gt;'+event.deltaX+', '+event.deltaY+', '+event.deltaFactor+'&lt;/p&gt;');
  });
  //停止监听
  setTimeout(function(){
      $('.demo').unmousewheel();
      $('.control').text('监听事件已卸载！');
  },5e3)
                            </code>
                        </pre>
                    </td>
                </tr>
                
                <tr id="OffCanvas（伸缩菜单）">
                    <td>offcanvas</td>
                    <td>
                        <h5>描述</h5>
                        <p>侧边伸缩导航菜单插件，多用于移动端导航，导航必须具有id属性，与导航控制按钮的href属性相同。</p>
                        <h5>多终端</h5>
                        <p>支持</p>
                        <h5>注意</h5>
                        <ol>
                            <li>为避免插件加载期间导航错乱闪现，可以先用样式将导航隐藏，插件运行后会清除原样式。</li>
                            <li>使用点击预加载方案（PJAX）的情况下菜单会出现点击不收回的情况，需要在使用时增加配置：<code>{ onClick:{ close:true}}</code></li>
                        </ol>
                        <h5>配置</h5>
                        <table class="table table-hover">
                            <tr>
                                <th>position</th>
                                <td>/菜单位置，默认左侧 left || top || right || bottom</td>
                            </tr>
                            <tr>
                                <th>zposition</th>
                                <td>菜单层次，默认上层，front || next</td>
                            </tr>
                            <tr>
                                <th>slidingSubmenus</th>
                                <td>菜单展开方向，默认横向，true || false</td>
                            </tr>
                            <tr>
                                <th>isMenu</th>
                                <td>是否按导航结构初始化，自定义结构和样式需要设为false</td>
                            </tr>
                            <tr>
                                <th>classes</th>
                                <td>主题class, mm-light || mm-white || mm-black</td>
                            </tr>
                        </table>
                        <h5>示例</h5>
                        <pre>
                            <code>
  &lt;nav class=&quot;demo hide&quot; id=&quot;menu&quot;&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href=&quot;/1&quot;&gt;导航&lt;/a&gt; &lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;/2&quot;&gt;导航2&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href=&quot;/#2&quot;&gt;二级&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;/#2&quot;&gt;二级&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;/#2&quot;&gt;二级&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
         &lt;/li&gt;
         &lt;li&gt;&lt;a href=&quot;/3&quot;&gt;导航3&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href=&quot;/#2&quot;&gt;二级&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;/#2&quot;&gt;二级&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;/#2&quot;&gt;二级&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
         &lt;/li&gt;
         &lt;li&gt;&lt;a href=&quot;/4&quot;&gt;导航4&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href=&quot;/#2&quot;&gt;二级&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;/#2&quot;&gt;二级&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;/#2&quot;&gt;二级&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
         &lt;/li&gt;
     &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;a href=&quot;#menu&quot; class=&quot;mobile_key&quot;&gt;导航控制按钮&lt;/a&gt;  &lt;!--导航控制按钮--&gt;
                            </code>
                        </pre>
                        <pre>
                            <code>
  //js
  require('offcanvas');
  $('.demo').offcanvas();
                            </code>
                        </pre>
                    </td>
                </tr>
                <tr id="On-scroll（滚动监听）">
                    <td>on-scroll</td>
                    <td>
                        <h5>描述</h5>
                        <p>监听页面滚动并操作出现在视野中的元素，可用于长页面滚动时做滚动加载；</p>
                        <p>当指定target时，target的li子元素数量需与效果元素数量对应，当前元素对应的<code>target>li</code>将添加"active"类；</p>
                        <p>当target向上滚出视野时将被添加<code>fixed</code>类，当指定targetFix时，<code>fixed</code>类将添加在targetFix元素上。</p>
                        <h5>多终端</h5>
                        <p>不支持</p>
                        <h5>配置</h5>
                        <table class="table table-hover">
                            <tr>
                                <th>offset</th>
                                <td>可选，顶部位置计算偏移量，默认0</td>
                            </tr>
                            <tr>
                                <th>target</th>
                                <td>可选，绑定目标，jquery选择器格式，默认无</td>
                            </tr>
                            <tr>
                                <th>targetCell</th>
                                <td>可选，绑定目标子元素类型，默认'li'</td>
                            </tr>
                            <tr>
                                <th>targetFix</th>
                                <td>可选，设置将添加fixed类的元素，通常是target的外层</td>
                            </tr>
                            <tr>
                                <th>speed</th>
                                <td>可选，滚动动画时间，单位ms，默认320</td>
                            </tr>
                            <tr>
                                <th>onshow</th>
                                <td>可选，元素第一次出现在视野的回调，默认无</td>
                            </tr>
                        </table>
                        <h5>示例</h5>
                        <pre>
                            <code>
  &lt;!-- html --&gt;
  &lt;style&gt;
  .target_wrap{height:42px;}
  .demo_Target{width:980px;margin:0 auto;overflow: hidden;*zoom:1;background:#fff;border-left:1px solid #eee;}
  .demo_Target li{float: left;height: 40px;line-height: 40px;border:1px solid #eee;margin-left:-1px;width: 33%;text-align: center;cursor: pointer;}
  .demo_Target.fixed{position: fixed;left: 50%;margin-left: -490px;top:0;z-index: 99;}
  .demo_Target .active{color:#39f;background:#eee;}
  .demo_sections{width:978px;border:1px solid #ccc;padding:2em 0;margin:2em auto;
  height: 800px;}
  .lazyPush{height: 400px;}
  &lt;/style&gt;

  &lt;div class=&quot;target_wrap&quot;&gt;
    &lt;ul class=&quot;demo_Target&quot;&gt;
      &lt;li&gt;channel01&lt;/li&gt;
      &lt;li&gt;channel02&lt;/li&gt;
      &lt;li&gt;channel03&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class=&quot;demo_sections&quot;&gt;
    anything...1
  &lt;/div&gt;
  &lt;div class=&quot;demo_sections&quot;&gt;
    anything...2
  &lt;/div&gt;
  &lt;div class=&quot;demo_sections&quot;&gt;
    anything...3
  &lt;/div&gt;

  &lt;div class=&quot;lazyPush&quot;&gt;
  &lt;textarea class=&quot;hide&quot;&gt;
    &lt;img src=&quot;http://temp.im/500x400/&quot;&gt;
  &lt;/textarea&gt;
  &lt;/div&gt;
  &lt;div class=&quot;lazyPush&quot;&gt;
  &lt;textarea class=&quot;hide&quot;&gt;
    &lt;img src=&quot;http://temp.im/500x400/&quot;&gt;
  &lt;/textarea&gt;
  &lt;/div&gt;
  &lt;div class=&quot;lazyPush&quot;&gt;
  &lt;textarea class=&quot;hide&quot;&gt;
    &lt;img src=&quot;http://temp.im/500x400/&quot;&gt;
  &lt;/textarea&gt;
  &lt;/div&gt;
                            </code>
                        </pre>
                        <pre>
                            <code>
  // js 参数说明
  require('on-scroll');
  //定位
  $('.demo_sections').onScroll({
    offset:42,
    target:'.demo_Target'
  });

  //滚动加载
  $('.lazyPush').onScroll({
    onshow:function(elem){
      base.topush($(elem),function(){
        console.log('懒加载完成')
      })
    }
  })  
                            </code>
                        </pre>
                    </td>
                </tr>
                <tr id="Photowall（等高图片墙）">
                    <td>photowall</td>
                    <td>
                        <h5>描述</h5>
                        <p>类似百度图片搜索结果页的等高图片墙效果</p>
                        <h5>多终端</h5>
                        <p>不建议移动端使用</p>
                        <h5>配置</h5>
                        <table class="table table-hover">
                            <tr>
                                <th>$this</th>
                                <td>图片列表选择器</td>
                            </tr>
                            <tr>
                                <th>items</th>
                                <td>图片单元选择器</td>
                            </tr>
                            <tr>
                                <th>border</th>
                                <td>间距，默认10，单位px</td>
                            </tr>
                        </table>
                        <h5>示例</h5>
                        <pre>
                            <code>
  &lt;style&gt;
  /* css */
  .imgList .imgItem ,.imgList .imgItem a img { display: inline-block; *display: inline;
  zoom: 1; vertical-align: top; overflow: hidden; }
  &lt;/style&gt;
                            </code>
                            <code>
  &lt;!-- html --&gt;
  &lt;div class=&quot;imgList&quot;&gt;
     &lt;div class=&quot;imgItem&quot;&gt; &lt;a href=&quot;&quot;&gt; &lt;img src=&quot;http://7xnt8z.com1.z0.glb.clouddn.com/view0.jpg&quot; &gt; &lt;/a&gt; &lt;/div&gt;
     &lt;div class=&quot;imgItem&quot;&gt; &lt;a href=&quot;&quot;&gt; &lt;img src=&quot;http://7xnt8z.com1.z0.glb.clouddn.com/view1.jpg&quot; &gt; &lt;/a&gt; &lt;/div&gt;
     &lt;div class=&quot;imgItem&quot;&gt; &lt;a href=&quot;&quot;&gt; &lt;img src=&quot;http://7xnt8z.com1.z0.glb.clouddn.com/view2.jpg&quot; &gt; &lt;/a&gt; &lt;/div&gt;
     &lt;div class=&quot;imgItem&quot;&gt; &lt;a href=&quot;&quot;&gt; &lt;img src=&quot;http://7xnt8z.com1.z0.glb.clouddn.com/view3.jpg&quot; &gt; &lt;/a&gt; &lt;/div&gt;
     &lt;div class=&quot;imgItem&quot;&gt; &lt;a href=&quot;&quot;&gt; &lt;img src=&quot;http://7xnt8z.com1.z0.glb.clouddn.com/view4.jpg&quot; &gt; &lt;/a&gt; &lt;/div&gt;
     &lt;div class=&quot;imgItem&quot;&gt; &lt;a href=&quot;&quot;&gt; &lt;img src=&quot;http://7xnt8z.com1.z0.glb.clouddn.com/view5.jpg&quot; &gt; &lt;/a&gt; &lt;/div&gt;
     &lt;div class=&quot;imgItem&quot;&gt; &lt;a href=&quot;&quot;&gt; &lt;img src=&quot;http://7xnt8z.com1.z0.glb.clouddn.com/view6.jpg&quot; &gt; &lt;/a&gt; &lt;/div&gt;
     &lt;div class=&quot;imgItem&quot;&gt; &lt;a href=&quot;&quot;&gt; &lt;img src=&quot;http://7xnt8z.com1.z0.glb.clouddn.com/view7.jpg&quot; &gt; &lt;/a&gt; &lt;/div&gt;
     &lt;div class=&quot;imgItem&quot;&gt; &lt;a href=&quot;&quot;&gt; &lt;img src=&quot;http://7xnt8z.com1.z0.glb.clouddn.com/view0.jpg&quot; &gt; &lt;/a&gt; &lt;/div&gt;
     &lt;div class=&quot;imgItem&quot;&gt; &lt;a href=&quot;&quot;&gt; &lt;img src=&quot;http://7xnt8z.com1.z0.glb.clouddn.com/view1.jpg&quot; &gt; &lt;/a&gt; &lt;/div&gt;
     &lt;div class=&quot;imgItem&quot;&gt; &lt;a href=&quot;&quot;&gt; &lt;img src=&quot;http://7xnt8z.com1.z0.glb.clouddn.com/view2.jpg&quot; &gt; &lt;/a&gt; &lt;/div&gt;
     &lt;div class=&quot;imgItem&quot;&gt; &lt;a href=&quot;&quot;&gt; &lt;img src=&quot;http://7xnt8z.com1.z0.glb.clouddn.com/view3.jpg&quot; &gt; &lt;/a&gt; &lt;/div&gt;
     &lt;div class=&quot;imgItem&quot;&gt; &lt;a href=&quot;&quot;&gt; &lt;img src=&quot;http://7xnt8z.com1.z0.glb.clouddn.com/view4.jpg&quot; &gt; &lt;/a&gt; &lt;/div&gt;
  &lt;/div&gt;
                            </code>
                        </pre>
                        <pre>
                            <code>
  //js
  require.async('photowall',function(photowall){
   photowall({
      $this:$('.imgList'),   //图片列表容器
      items:'.imgItem',      //图片单元
      border:10              //间距，默认10px
      })
   })
                            </code>
                        </pre>
                    </td>
                </tr>
                <tr id="Placeholder">
                    <td>placeholder</td>
                    <td>
                        <h5>描述</h5>
                        <p>placeholder特性兼容插件</p>
                        <h5>示例</h5>
                        <pre>
                            <code>
    &lt;input type=&quot;text&quot; placeholder=&quot;兼容ie8&quot;&gt;
                            </code>
                        </pre>
                        <pre>
                            <code>
    require('placeholder');
    $('input, textarea').placeholder();
                            </code>
                        </pre>
                    </td>
                </tr>
                <tr id="Qr（二维码）">
                    <td>qr</td>
                    <td>
                        <h5>描述</h5>
                        <p>生成二维码，封装自<a href="https://github.com/jeromeetienne/jquery-qrcode" target="_blank">jquery-qrcode</a>。</p>
                        <h5>多终端</h5>
                        <p>支持</p>
                        <h5>示例</h5>
                        <pre>
                            <code>
  &lt;style&gt;
    #qr_container{position: fixed;right:10px;bottom:10px;text-align: center;}
  &lt;/style&gt;
                            </code>
                            <code>
  &lt;div id=&quot;qr_container&quot;&gt; 微信扫描查看或分享 &lt;/div&gt;
                            </code>
                        </pre>
                        <pre>
                            <code>
  //js
  var qr = require('qr');
     
  var qrcode = new qr(document.getElementById("qr_container"), {
    text: "http://www.jerei.com",             // 生成内容
    width: 128,                               // 宽
    height: 128,                              // 高
    colorDark : "#000000",                    // 颜色
    colorLight : "#ffffff",                   // 背景色
    correctLevel : qr.CorrectLevel.H          // 容错级别 L|M|Q|H
  });

  //qrcode.clear();                           // clear the code.
  //qrcode.makeCode("http://naver.com");      // make another code.
                            </code>
                        </pre>
                    </td>
                </tr>
                <tr id="Responsive（响应式工具）">
                    <td>responsive</td>
                    <td>
                        <h5>描述</h5>
                        <p>响应式工具包，包含想响应式所需的js功能</p>
                        <table class="table table-bordered">
                            <tr>
                                <td>getType([callback])</td>
                                <td>
                                    <p>获取当前设备类型，回调函数可选，当无回调时返回字符串('Pc','Pad','Mobile')，有回调时回调接受返回字符串为参数：</p>
                                    <pre>
                                        <code>
   var resp = require('responsive');
   //无回调
   var type=resp.getType();      //"Pc" || "Pad" || "Mobile"
   
   //有回调
   resp.getType(function(type){
      alert(type);                //"Pc" || "Pad" || "Mobile"
   })
   
                                        </code>
                                    </pre>
                                </td>
                            </tr>
                            <tr>
                                <td>getOrient([callback])</td>
                                <td>
                                    <p>获取移动设备屏幕方向，回调函数可选，当无回调时返回字符串('Heng','Shu')，有回调时回调函数将持续监听屏幕方向变化，并接受屏幕方向为参数：</p>
                                    <pre>
                                        <code>
   var resp = require('responsive');
   //无回调
   var orient=resp.getOrient();// "Heng" || "Shu"
   
   //有回调
   resp.getOrient(function(orient){
      alert(orient);// 每次旋转屏幕都将alert "Heng" 或 "Shu"
   })
                                        </code>
                                    </pre>
                                </td>
                            </tr>
                            <tr>
                                <td>resImg(bigSrc, [filter])</td>
                                <td>
                                    <p>全局图片响应方法</p>
                                    <p>图片的src将在手机端显示，bigSrc参数指定存放大图的自定义属性，可省，默认"data-src"，"data-src"图片地址将在pc和pad端显示。</p>
                                    <p>filter参数传入响应图片的范围，可省，默认检索整个页面。</p>
                                    <pre>
                                        <code>
    &lt;img src=&quot;small.jpg&quot; data-src=&quot;big.jpg&quot; /&gt; 
                                        </code>
                                        <code>
    var resp = require('responsive');
    resp.resImg();
                                        </code>
                                  </pre>
                                </td>
                            </tr>
                            <tr>
                                <td>topush(DOM,callback)</td>
                                <td>
                                    <p><code>&lt;textarea&gt;</code>标签在页面中具有延迟渲染的特性，因此是一个天然的缓存容器，只要将自身隐藏，便实现了html5 <code>template</code>标签的特性，唯一的问题是使用<code>&lt;textarea&gt;</code>暂存的代码中不能包含另一个<code>&lt;textarea&gt;</code>，否则会造成暂存标签意外闭合，这时也可以选择<code>&lt;script type="text/template"&gt;</code>标签代替，它和<code>textarea</code>标签的作用是等价的，并且<code>script</code>标签自身就是不可见的，无须手动隐藏：</p>
                                    <pre>
                                       <code>
     &lt;!--textarea标签暂存页面片段--&gt;
     &lt;div class=&quot;demo topush&quot;&gt;
        &lt;textarea class=&quot;hide&quot;&gt;
          &lt;a href=&quot;#&quot;&gt;暂存的页面片段&lt;/a&gt;
          &lt;a href=&quot;#&quot;&gt;暂存的页面片段&lt;/a&gt;
          &lt;a href=&quot;#&quot;&gt;暂存的页面片段&lt;/a&gt;
        &lt;/textarea&gt;
     &lt;/div&gt;
                                    </code>
                                    <code>
     &lt;!--script标签暂存页面片段--&gt;
     &lt;div class=&quot;demo topush&quot;&gt;
        &lt;script type=&quot;text/template&quot;&gt;
          &lt;a href=&quot;#&quot;&gt;暂存的页面片段&lt;/a&gt;
          &lt;a href=&quot;#&quot;&gt;暂存的页面片段&lt;/a&gt;
          &lt;a href=&quot;#&quot;&gt;暂存的页面片段&lt;/a&gt;
        &lt;/script&gt;
     &lt;/div&gt;
                                    </code>
                                   </pre>
                                    <p><code>resp.topush(DOM,callback)</code>方法专门用来取出暂存标签中的html片段（或发起Ajax）插入到外层元素中，两个参数分别是指定外层元素和取出后的回调函数，均为可选，DOM默认<code>.topush</code>。</p>
                                    <p>加载后的dom会添加<code>pushed</code>类，用来标记暂存代码已经取出。</p>
                                    <p>示例：</p>
                                    <pre>
                                          <code>
   &lt;!--发起Ajax的例子--&gt;
   &lt;div class=&quot;demo topush&quot;&gt;
      &lt;textarea class=&quot;hide&quot; data-url=&quot;/test/ajax.php&quot;&gt; &lt;/textarea&gt;
   &lt;/div&gt;
                                        </code>
                                        <code>
    var resp = require('responsive');
   //无参数调用，显示所有".topush"元素中的暂存代码
   resp.topush();  
   
   //有回调                  
   resp.topush(function(e){           
      console.log(e.attr('class')) //"topush ..."
   });
   
   //指定渲染目标                 
   resp.topush('.demo');
   
   //传入两个参数
   resp.topush('.demo',function(e){    
      console.log(e.html())//.demo 渲染后的html
   });     
                                      </code>
                                  </pre>
                                </td>
                            </tr>
                            <tr>
                                <td>scanpush()</td>
                                <td>
                                    <p><code>resp.scanpush()</code>方法会扫描页面上具有延迟渲染类名的元素，并按规则对其渲染。</p>
                                    <p>预置的四个按需渲染类是：<code>.PcPush</code>,<code>.UnpcPush</code>,<code>.MobilePush</code>,<code>.UnmobilePush</code>, 分别代表“只有Pc渲染”，“只有非Pc渲染”，“只有手机渲染”，“只有非手机渲染”,渲染完成后会触发该元素的渲染类同名事件，用
                                        <code>$(DOM).on('PcPush'/'UnpcPush'/'MobilePush'/'UnmobilePush')</code>可以捕捉到，事件也会冒泡到<code>body</code>上。</p>
                                    <p>并且这四个类元素下的<code>textarea</code>标签将自动隐藏，不需要手动加隐藏类。</p>
                                    <p>示例：</p>
                                    <pre>
                                        <code>
  &lt;!-- html --&gt;
 &lt;div class=&quot;PcPush&quot;&gt;
    &lt;textarea&gt;
       只在Pc显示
    &lt;/textarea&gt;
 &lt;/div&gt;
 
 &lt;div class=&quot;UnpcPush&quot;&gt;
    &lt;textarea&gt;
       除了Pc都显示
    &lt;/textarea&gt;
 &lt;/div&gt;
                                       </code>
                                   </pre>
                                   <pre>
                                       <code>
    //js
    var resp = require('responsive');
    $('body').on('PcPush',function(){
        console.log( 'PcPush已经被渲染了' )
    })
    $('body').on('UnpcPush',function(){
        console.log( '.UnpcPush已经被渲染了' )
    })

    resp.scanpush();
  
                                       </code>
                                    </pre>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr id="Scroll-bar（滚动条）">
                    <td>scroll-bar</td>
                    <td>
                        <h5>描述</h5>
                        <p>滚动条美化插件，支持横向和纵向、滚动条自动隐藏、样式自定义。</p>
                        <h5>多终端</h5>
                        <p>移动端自动使用原生</p>
                        <h5>注意</h5>
                        <p>内容元素不能有可向上传导的margin-top属性，否则会干扰滚动定位。</p>
                        <h5>配置</h5>
                        <table class="table table-hover">
                            <tr>
                                <th>wrap</th>
                                <td>包裹元素，默认不指定，将插入div.scroll_cont</td>
                            </tr>
                            <tr>
                                <th>monitor</th>
                                <td>否监听内容变化(用于多插件协作)，布尔值，默认false</td>
                            </tr>
                            <tr>
                                <th>keyway</th>
                                <td>按钮键程，默认30(px)</td>
                            </tr>
                            <tr>
                                <th>width</th>
                                <td>滚动条宽度，默认8(px)</td>
                            </tr>
                            <tr>
                                <th>btnLength</th>
                                <td>按钮长度，默认0(不显示按钮)</td>
                            </tr>
                            <tr>
                                <th>btnBreadth</th>
                                <td>按钮宽度，默认与滚动条同宽</td>
                            </tr>
                            <tr>
                                <th>sliderWidth</th>
                                <td>滑块宽度，默认与滚动条同宽</td>
                            </tr>
                            <tr>
                                <th>hideBar</th>
                                <td>自动隐藏滚动条，鼠标进入显示，默认false</td>
                            </tr>
                            <tr>
                                <th>ontop</th>
                                <td>滚动到顶部触发的回调，默认无</td>
                            </tr>
                            <tr>
                                <th>onend</th>
                                <td>滚动到底部触发的回调，默认无</td>
                            </tr>
                        </table>
                        <h5>示例</h5>
                        <pre>
                            <code>
  &lt;style&gt;
  /*css*/
  .demo{position:relative;overflow:hidden;height:320px;max-width: 480px;margin:10px auto;}
  .demo .scroll_cont{background: yellow;}
  .demo .scroll_cont img{max-width: none;}
  &lt;/style&gt;
                              </code>
                              <code>
  &lt;!--html--&gt;
  &lt;div class=&quot;demo demo1&quot;&gt;
     &lt;img src=&quot;http://temp.im/480x480/&quot;&gt;&lt;br/&gt;
     content conten ontentcontent1&lt;br/&gt;
     content7&lt;br/&gt;
     content conten ontentcontent1&lt;br/&gt;
     content7&lt;br/&gt;
  &lt;/div&gt;
  &lt;div class=&quot;demo demo2&quot;&gt;
     &lt;img src=&quot;http://temp.im/900x320/&quot;&gt;&lt;br/&gt;
  &lt;/div&gt;
                            </code>
                        </pre>
                        <pre>
                            <code>
  //js
  require('scroll-bar');
  $('.demo1').scrollBar();
  $('.demo2').scrollBar({
      overflow: "x"
  });
                            </code>
                        </pre>
                    </td>
                </tr>
                <tr id="Scroll-col（横向滚动）">
                    <td>scroll-col</td>
                    <td>
                        <h5>描述</h5>
                        <p>横向滚动，支持触屏和半响应; 需指定滚动元素宽度和效果容器高度。</p>
                        <p>内置<code>hero</code>模式，用于全屏轮显焦点图，三张居中轮显。通常该模式的样式为.demo不设宽度(即全屏宽度)，.demo li普通banner宽度(如980px)；</p>
                        <p>内置<code>unloop</code>模式，不循环滚动，用于做大事记类的时间轴效果；</p>
                        <h5>注意</h5>
                        <ol>
                            <li>效果自动计算间距("margin-right")，样式设置的右间距将被覆盖，或者作为效果无法运行时的后备样式。</li>
                            <li>当显示数+滚动步幅&gt;=元素总数时效果不可用</li>
                        </ol>
                        <h5>多终端</h5>
                        <p>建议的多终端响应方案：各终端分别设置scroll-cell宽度，用rect-(number)方式固定scroll-cell宽高比，元素间距和整体高度都可以适应</p>
                        <h5>配置</h5>
                        <table class="table table-hover">
                            <tr>
                                <th>direct</th>
                                <td>自动播放方向，可选left | right</td>
                            </tr>
                            <tr>
                                <th>mode</th>
                                <td>模式，默认无，可选 hero(全屏三图滚动) | unloop(不循环)</td>
                            </tr>
                            <tr>
                                <th>num</th>
                                <td>滚动个数，默认99，即能显示几个显示几个</td>
                            </tr>
                            <tr>
                                <th>auto</th>
                                <td>默认true，自动播放</td>
                            </tr>
                            <tr>
                                <th>interval</th>
                                <td>默认5000，单位ms，自动播放间隔</td>
                            </tr>
                            <tr>
                                <th>duration</th>
                                <td>默认640，单位ms，单次滚动持续时长</td>
                            </tr>
                            <tr>
                                <th>animate</th>
                                <td>默认‘swing’，滚动效果，来自jquery.easing</td>
                            </tr>
                            <tr>
                                <th>step</th>
                                <td>默认1，每次滚动个数</td>
                            </tr>
                            <tr>
                                <th>wrap</th>
                                <td>默认‘ul’，指定滚动包裹元素</td>
                            </tr>
                            <tr>
                                <th>cell</th>
                                <td>默认‘li’，指定滚动元素</td>
                            </tr>
                            <tr>
                                <th>prev</th>
                                <td>指定向左按钮，默认无，将自动插入 '.arrs .arr_prev'元素</td>
                            </tr>
                            <tr>
                                <th>next</th>
                                <td>指定向右按钮，默认无，将自动插入 '.arrs .arr_next'元素</td>
                            </tr>
                            <tr>
                                <th>handletouch</th>
                                <td>默认false，是否劫持触屏事件</td>
                            </tr>
                            <tr>
                                <th>callback</th>
                                <td>回调 @param (nowStep)</td>
                            </tr>
                            <tr>
                                <th>ext</th>
                                <td>扩展 @param (this, showNumber, allStep)</td>
                            </tr>
                        </table>
                        <h5>示例</h5>
                        <pre>
                            <code>
  &lt;style&gt;
  .demo {height: 10em; width:32em; display:none;margin-bottom:2em;}
  .demo li {width:10em; background:yellow;}
  .demo .arrs{position: absolute; top:50%; width:2em;height: 2em;background: yellow;margin-top: -1em;}
  .demo .arr_prev{left:0;}
  .demo .arr_next{right:0;}
  .demo .scroll_nav{position:absolute;left:0;top:0;}
  .demo .scroll_nav .on{color:#39f;}
  &lt;/style&gt;             
                            </code>
                            <code>
  &lt;h4&gt;普通模式&lt;/h4&gt;      
  &lt;div class=&quot;demo&quot;&gt;
     &lt;ul&gt;
        &lt;li&gt;&lt;img src=&quot;http://temp.im/300x301/&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;http://temp.im/300x302/&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;http://temp.im/300x303/&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;http://temp.im/300x304/&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;http://temp.im/300x305/&quot; /&gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
                            </code>
                            <code>
  &lt;style&gt;
  .demo-hero { display:none;}
  .demo-hero li {width:980px; background:yellow;}
  .demo-hero .arrs{position: absolute; top:50%; width:2em;height: 2em;background: yellow;margin-top: -1em;}
  .demo-hero .arr_prev{left:0;}
  .demo-hero .arr_next{right:0;}
  &lt;/style&gt;
                            </code>
                            <code>
  &lt;h4&gt;hero模式&lt;/h4&gt;  
  &lt;div class=&quot;demo-hero&quot;&gt;
     &lt;ul&gt;
        &lt;li&gt;&lt;img src=&quot;http://temp.im/980x301/&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;http://temp.im/980x302/&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;http://temp.im/980x303/&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;http://temp.im/980x304/&quot; /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;http://temp.im/980x305/&quot; /&gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
  &lt;span class=&quot;button myback&quot;&gt;back&lt;/span&gt;&lt;span class=&quot;button myforward&quot;&gt;forward&lt;/span&gt;
                            </code>
                        </pre>
                        <pre>
                            <code>
  //js
  require('scroll-col');

  $('.demo').scrollCol();

  $('.demo-hero').scrollCol({
    mode: 'hero',
    prev: '.myback',
    next: '.myforward'
  });
                            </code>
                        </pre>
                    </td>
                </tr>
                <tr id="Scroll-load（滚动加载）">
                    <td>scroll-load</td>
                    <td>
                        <h5>描述</h5>
                        <p>监听指定元素滚动到底部事件，自动添加加载条，并执行加载方法</p>
                        <h5>配置</h5>
                        <table class="table table-hover">
                            <tr>
                                <th>distance</th>
                                <td>距离底部开始加载的距离，默认70，单位px</td>
                            </tr>
                            <tr>
                                <th>callback</th>
                                <td>触发加载回调，接收加载条为参数，加载结束需手动隐藏</td>
                            </tr>
                            <tr>
                                <th>destory</th>
                                <td>销毁滚动加载监听，默认false</td>
                            </tr>
                        </table>
                        <h5>示例</h5>
                        <pre>
                            <code>
    require('scroll-load');
    $('#cont').scrollLoad({
        callback: function(loading) {
            $.ajax({
                url: api.getxxx,
                data:{}
                success:function(data){
                    renderHTML(data);
                    //加载结束后手动隐藏加载条
                    loading.hide();
                }
            })
        }
    });
                            </code>
                        </pre>
                    </td>
                </tr>
                <tr id="Scroll-row（纵向滚动）">
                    <td>scroll-row</td>
                    <td>
                        <h5>描述</h5>
                        <p>垂直方向整行滚动。可以处理多列情况，默认添加内部按钮， 如果需要外部按钮可以指定自行添加的按钮。
                        </p>
                        <h5>多终端</h5>
                        <p>支持</p>
                        <h5>配置</h5>
                        <table class="table table-hover">
                            <tr>
                                <th>prev</th>
                                <td>指定向上箭头，默认无，将添加 '.arrs .arr_prev'</td>
                            </tr>
                            <tr>
                                <th>next</th>
                                <td>指定向下箭头，默认无，将添加 '.arrs .arr_next'</td>
                            </tr>
                            <tr>
                                <th>wrap</th>
                                <td>默认ul，指定包裹元素</td>
                            </tr>
                            <tr>
                                <th>cell</th>
                                <td>默认li，指定列表元素</td>
                            </tr>
                            <tr>
                                <th>line</th>
                                <td>滚动行数</td>
                            </tr>
                            <tr>
                                <th>duration</th>
                                <td>滚动时长，默认460，单位ms</td>
                            </tr>
                            <tr>
                                <th>animate</th>
                                <td>默认'swing'，动画曲线，来自jquery.easing</td>
                            </tr>
                            <tr>
                                <th>auto</th>
                                <td>默认true，自动滚动</td>
                            </tr>
                            <tr>
                                <th>pause</th>
                                <td>默认true，自动滚动时是否悬浮暂停</td>
                            </tr>
                            <tr>
                                <th>interval</th>
                                <td>自动播放间隔，默认5000，单位ms</td>
                            </tr>
                            <tr>
                                <th>callback</th>
                                <td>滚动回调，@param (nowRow) :当前所在页数</td>
                            </tr>
                            <tr>
                                <th>ext</th>
                                <td>扩展方法，@param (totalRow) :总页数</td>
                            </tr>
                        </table>
                        <h5>示例</h5>
                        <pre>
                            <code>
  &lt;style&gt;
  .demo { position: relative; width: 320px; height: 22em; overflow: hidden; }
  .demo li{ height: 10em; overflow: hidden; margin-bottom:1em; background:yellow; }
  .demo .arrs{position: absolute; right:0; width:1.5em;height: 1.5em;background: grey;}
  .demo .arr_prev{top:0;}
  .demo .arr_next{top:2em;}
  &lt;/style&gt;
                          </code>
                          <code>
  &lt;div class=&quot;demo&quot;&gt;
     &lt;ul class=&quot;row&quot;&gt;
        &lt;li class=&quot;span-4 midd-6 smal-12&quot;&gt;&lt;img src=&quot;http://temp.im/300x300/&quot; /&gt;&lt;/li&gt;
        &lt;li class=&quot;span-4 midd-6 smal-12&quot;&gt;&lt;img src=&quot;http://temp.im/400x400/&quot; /&gt;&lt;/li&gt;
        &lt;li class=&quot;span-4 midd-6 smal-12&quot;&gt;&lt;img src=&quot;http://temp.im/500x500/&quot; /&gt;&lt;/li&gt;
        &lt;li class=&quot;span-4 midd-6 smal-12&quot;&gt;&lt;img src=&quot;http://temp.im/300x300/&quot; /&gt;&lt;/li&gt;
        &lt;li class=&quot;span-4 midd-6 smal-12&quot;&gt;&lt;img src=&quot;http://temp.im/400x400/&quot; /&gt;&lt;/li&gt;
        &lt;li class=&quot;span-4 midd-6 smal-12&quot;&gt;&lt;img src=&quot;http://temp.im/500x500/&quot; /&gt;&lt;/li&gt;
        &lt;li class=&quot;span-4 midd-6 smal-12&quot;&gt;&lt;img src=&quot;http://temp.im/300x300/&quot; /&gt;&lt;/li&gt;
        &lt;li class=&quot;span-4 midd-6 smal-12&quot;&gt;&lt;img src=&quot;http://temp.im/400x400/&quot; /&gt;&lt;/li&gt;
        &lt;li class=&quot;span-4 midd-6 smal-12&quot;&gt;&lt;img src=&quot;http://temp.im/500x500/&quot; /&gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class=&quot;myprev&quot;&gt;prev&lt;/div&gt;
  &lt;div class=&quot;mynext&quot;&gt;next&lt;/div&gt;
                            </code>
                        </pre>
                        <pre>
                            <code>
  //js
  require('scroll-row');
  $('.demo').scrollRow({
    prev:'.myprev',
    next:'.mynext'
  })
                            </code>
                        </pre>
                    </td>
                </tr>
                <tr id="Select（下拉框）">
                    <td>select</td>
                    <td>
                        <h5>描述</h5>
                        <p>下拉框美化插件，作用于原生select标签时会创建一个继承样式的模拟结构，并隐藏原select标签，操作模拟select会将结果同步回原生select，支持<code>disabled</code>和<code>selected</code>特性模拟。</p>
                        <h5>多终端</h5>
                        <p>支持</p>
                        <h5>注意</h5>
                        <ol>
                            <li>在移动端select可以完全自定义样式，所以不需要创建模拟结构，但仍然支持对select的操作回调</li>
                        </ol>
                        <h5>配置</h5>
                        <table class="table table-hover">
                            <tr>
                                <th>data</th>
                                <td>优先使用此数据初始化，格式见示例</td>
                            </tr>
                            <tr>
                                <tr>
                                    <th>posi</th>
                                    <td>下拉方向，默认"bottom"，可选"top"和"auto"，"auto"会计算下拉框距离屏幕上下两端的尺寸，向大的一边展开。</td>
                                </tr>
                                <tr>
                                    <th>hideSelected</th>
                                    <td>默认false，是否隐藏已经选中的项</td>
                                </tr>
                                <tr>
                                    <th>hideDisabled</th>
                                    <td>默认true，是否隐藏不可用的项</td>
                                </tr>
                                <tr>
                                    <th>act</th>
                                    <td>触发动作，可选 click | mouseenter</td>
                                </tr>
                                <tr>
                                    <th>hook</th>
                                    <td>样式钩子，用于自定义皮肤，默认default，生成的类名为<code>select-ui-choose-hook</code>和<code>select-ui-options-hook</code>，具体样式写法参考内置样式; 另外内置<code>thin</code>皮肤，适用语言选择类场景</td>
                                </tr>
                                <tr>
                                    <th>callback(value,text)</th>
                                    <td>选中回调，接收option的value值和text值为参数</td>
                                </tr>
                        </table>
                        <h5>示例</h5>
                        <pre>
                            <code>
  &lt;style&gt;
  .demo, button{display: block; width: 200px; margin:10px;}
  &lt;/style&gt;
  &lt;form id=&quot;test&quot; &gt;
    &lt;!-- 从原生select初始化 --&gt;
    &lt;select class=&quot;demo demo-fromdom&quot; name=&quot;select1&quot;&gt;
      &lt;option selected&gt;--请选择--&lt;/option&gt;
      &lt;option value=&quot;1&quot;&gt;山东&lt;/option&gt;
      &lt;option value=&quot;2&quot;&gt;山西&lt;/option&gt;
      &lt;option value=&quot;3&quot;&gt;河南&lt;/option&gt;
    &lt;/select&gt;
    &lt;!-- 从数据初始化 --&gt;
    &lt;select class=&quot;demo demo-fromdata&quot; name=&quot;select2&quot;&gt;
      &lt;option disabled&gt;--请选择--&lt;/option&gt;
    &lt;/select&gt;
    
    &lt;button type=&quot;submit&quot;&gt;提交&lt;/button&gt;
  &lt;/form&gt;
                            </code>
                        </pre>
                        <pre>
                            <code>
  require('select');
  var dataAjax = [
        {
          "option":"济南",
          "value":"ajax1"
        },{
          "option":"烟台",
          "value":"ajax2",
          "selected":true
        },{
          "option":"青岛",
          "value":"ajax3"
        }
      ];

  $('.demo-fromdom').select({
    hideSelected:true,
    callback: function(value, text) { 
      console.log('更改级联select的数据,这里以传data为例，也可以修改DOM后重新执行一下select()方法')
      $('select.demo-fromdata').select({
        data: dataAjax
      })
    }
  });

  $('.demo-fromdata').select({
    callback: function(val,txt){
      alert('选中了'+txt)
    }
  })
  //提交测试
  $('#test').on('submit',function(e){
    e.preventDefault();
    alert($(this).serialize())
  })
                                </code>
                            </pre>
                        </td>
                    </tr>
                    <tr id="SendCode（短信验证码）">
                        <td>sendcode</td>
                        <td>
                            <h5>描述</h5>
                            <p>封装带倒计时的短信验证码功能</p>
                            <h5>配置</h5>
                            <table class="table table-hover">
                                <tr>
                                    <th>mobile</th>
                                    <td>要发送的手机号</td>
                                </tr>
                                <tr>
                                    <th>url</th>
                                    <td>验证码请求地址</td>
                                </tr>
                                <tr>
                                    <th>keyName</th>
                                    <td>手机号的数据name，默认<code>"mobile"</code></td>
                                </tr>
                                <tr>
                                    <th>data</th>
                                    <td>请求附加数据，默认<code>{}</code></td>
                                </tr>
                                <tr>
                                    <th>time</th>
                                    <td>倒计时时间，默认60，单位s</td>
                                </tr>
                                <tr>
                                    <th>sendBefore</th>
                                    <td>发送前回调，接收三个参数：手机号，成功回调，失败回调，可用于发送前对手机号做其他校验</td>
                                </tr>
                                <tr>
                                    <th>sendAfter</th>
                                    <td>发送成功回调</td>
                                </tr>
                            </table>
                            <h5>示例</h5>
                            <pre>
                                <code>
    &lt;a href=&quot;###&quot; class=&quot;btn btn-default&quot; id=&quot;btn&quot;&gt;sendcode&lt;/a&gt;
                                </code>
                            </pre>
                            <pre>
                                <code>
    require('sendcode');
    $('#btn').sendcode({
        mobile:'156555555',
        url:seajs.root + '/test/data.json',
        sendBefore:function(mobile, suc, err){
            console.log(mobile);
            if(mobile){
                suc()
            }else{
                err()
            }
        },
        sendAfter:function(){
            console.log('sendAfter')
        }
    });
                                </code>
                            </pre>
                        </td>
                    </tr>
                    <tr id="Slide（幻灯片）">
                        <td>slide</td>
                        <td>
                            <h5>描述</h5>
                            <p> 幻灯片效果，支持触屏操作，支持PC端图片按需加载（不可与响应式图片同时使用）。</p>
                            <h5>多终端</h5>
                            <p>支持</p>
                            <h5>注意</h5>
                            <ol>
                                <li>自动生成的导航（小圆点）和左右箭头默认<code>display:none</code>且不绑定事件，使用时需先在样式中显示；</li>
                                <li>默认导航是带序号的a标签，要自定义a标签内容需要指定导航容器并添加<code>custom</code>属性:<code>&lt;div class=&quot;my_navs&quot; custom&gt; 自己写a标签... &lt;/div&gt;</code>
                                </li>
                            </ol>
                            <h5>配置</h5>
                            <table class="table table-hover">
                                <tr>
                                    <th>wrap</th>
                                    <td>默认"ul"，指定包裹元素</td>
                                </tr>
                                <tr>
                                    <th>cell</th>
                                    <td>默认"li"，指定切换元素</td>
                                </tr>
                                <tr>
                                    <th>effect</th>
                                    <td>切换效果，默认‘slide’，可选slide\fade\toggle</td>
                                </tr>
                                <tr>
                                    <th>direction</th>
                                    <td>默认"x"，slide效果滚动方向，可选 x \ y</td>
                                </tr>
                                <tr>
                                    <th>animate</th>
                                    <td>默认"ease"，css3动画曲线</td>
                                </tr>
                                <tr>
                                    <th>duration</th>
                                    <td>默认200，切换动画时长(ms)</td>
                                </tr>
                                <tr>
                                    <th>start</th>
                                    <td>起始帧，默认0，即从第一张开始</td>
                                </tr>
                                <tr>
                                    <th>auto</th>
                                    <td>默认true，自动播放</td>
                                </tr>
                                <tr>
                                    <th>pause</th>
                                    <td>默认true，控制是否鼠标悬停时暂停播放，还可以传入选择器将作为暂停按钮，点击暂停，按钮将被添加'pause'类</td>
                                </tr>
                                <tr>
                                    <th>interval</th>
                                    <td>默认5000，自动播放间隔(ms)</td>
                                </tr>
                                <tr>
                                    <th>act</th>
                                    <td>默认‘click’，导航按钮触发事件 mouseenter | click</td>
                                </tr>
                                <tr>
                                    <th>prevHtml</th>
                                    <td>左箭头html</td>
                                </tr>
                                <tr>
                                    <th>nextHtml</th>
                                    <td>右箭头html</td>
                                </tr>
                                <tr>
                                    <th>prev</th>
                                    <td>指定左箭头，不指定将自动插入'.arrs .arr_prev'元素</td>
                                </tr>
                                <tr>
                                    <th>next</th>
                                    <td>指定右箭头，不指定将自动插入'.arrs .arr_next'元素</td>
                                </tr>
                                <tr>
                                    <th>navs</th>
                                    <td>指定自定义导航，不指定将自动添加'.slide_nav'元素或使用效果元素内已存在的".slide_nav"元素;</td>
                                </tr>
                                <tr>
                                    <th>imgattr</th>
                                    <td>默认"slide-src"，按需加载图片的地址标签，注意不能是<code>data-src</code>，因为与响应式图片方法冲突</td>
                                </tr>
                                <tr>
                                    <th>handletouch</th>
                                    <td>默认false，是否劫持触屏事件</td>
                                </tr>
                                <tr>
                                    <th>callback</th>
                                    <td>回调，@param (效果元素，切换元素，当前帧序号) </td>
                                </tr>
                                <tr>
                                    <th>ext</th>
                                    <td>扩展，@param (效果元素，切换元素，总帧数)</td>
                                </tr>
                            </table>
                            <h5>示例</h5>
                            <pre>
                                <code>
  &lt;style&gt;
  .demo{max-width:1000px;margin:auto;height:0; overflow:hidden; padding-bottom:40%;}
  .demo li{background: yellow;}
  .demo img{width:100%; height:100%;}
  .demo .slide_nav{display:block; left: 0;bottom:0;}
  .demo .slide_nav a{float: left;width: 16px;height: 16px;overflow:hidden;background:#ccc;margin:6px;}
  .demo .slide_nav .on{background:#666;}
  &lt;/style&gt;
                              </code>
                              <code>
  &lt;div class=&quot;demo&quot;&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;img src=&quot;http://7xnt8z.com1.z0.glb.clouddn.com/view0.jpg&quot; /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src=&quot;http://7xnt8z.com1.z0.glb.clouddn.com/view1.jpg&quot; /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src=&quot;http://7xnt8z.com1.z0.glb.clouddn.com/view2.jpg&quot; /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src=&quot;http://7xnt8z.com1.z0.glb.clouddn.com/view3.jpg&quot; /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src=&quot;http://7xnt8z.com1.z0.glb.clouddn.com/view4.jpg&quot; /&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;

                                </code>
                            </pre>
                            <pre>
                                <code>
  //js
  require('slide');
  $('.demo').slide();
                                </code>
                            </pre>
                        </td>
                    </tr>
                    <tr id="Tab（选项卡）">
                        <td>tab</td>
                        <td>
                            <h5>描述</h5>
                            <p>选项卡，默认识别".tab_t"为标签，".tab_c"为内容，标签和内容的结构没有限制，当前显示的标签和内容分别会添加".tab_t_cur"和".tab_c_cur"类名用于定义样式，第一个标签还会额外添加".first"类名，默认通过样式隐藏显示内容，如果指定非".tab_c"元素作为选项卡内容，显示隐藏的样式也需要自己定义</p>
                            <p>忽略选项卡：当选项卡标签元素具有"ignore"属性时，该标签不参与选项卡的互动效果</p>
                            <h5>多终端</h5>
                            <p>支持</p>
                            <h5>配置</h5>
                            <table class="table table-hover">
                                <tr>
                                    <th>tabs</th>
                                    <td>tab标签，默认内部查找.tab_t</td>
                                </tr>
                                <tr>
                                    <th>conts</th>
                                    <td>tab内容，默认内部查找.tab_c</td>
                                </tr>
                                <tr>
                                    <th>posi_auto</th>
                                    <td>默认true，标签自动定位</td>
                                </tr>
                                <tr>
                                    <th>width_auto</th>
                                    <td>默认false，标签自适应宽度</td>
                                </tr>
                                <tr>
                                    <th>left</th>
                                    <td>默认0，单位px，第一个标签距左起始位置</td>
                                </tr>
                                <tr>
                                    <th>auto</th>
                                    <td>默认false，是否自动播放</td>
                                </tr>
                                <tr>
                                    <th>interval</th>
                                    <td>默认5000，单位ms，自动播放间隔</td>
                                </tr>
                                <tr>
                                    <th>start</th>
                                    <td>默认0，初始显示第几个</td>
                                </tr>
                                <tr>
                                    <th>margin</th>
                                    <td>默认0，单位px，标签间距</td>
                                </tr>
                                <tr>
                                    <th>act</th>
                                    <td>默认‘click’，触发动作，'mouseenter','touchend'等</td>
                                </tr>
                                <tr>
                                    <th>beforeChange</th>
                                    <td>切换前事件 @param ($this,$tab_t,index) : 当前对象，标签，前去帧序号</td>
                                </tr>
                                <tr>
                                    <th>callback</th>
                                    <td>回调方法 @param ($this,$tab_t,index) : 当前对象，标签，当前帧序号</td>
                                </tr>
                                <tr>
                                    <th>ext</th>
                                    <td>扩展方法 @param ($this,$tab_t,opts) : 当前对象，标签，配置</td>
                                </tr>
                            </table>
                            <h5>示例</h5>
                            <pre>
                                <code>
  &lt;style&gt;
  /*css*/
  .demo{width:480px;}
  .demo .tab_b{text-align:right;background:#ccc;}
  .demo .tab_t{width: 100px; text-align: center;color:#fff;}
  .demo .tab_t_cur{background:#39f;}
  .demo .tab_c{height:200px;border:1px solid #ccc;}
  &lt;/style&gt;
                                </code>
                                <code>
  &lt;!--html--&gt;
  &lt;div class=&quot;demo&quot;&gt;
     &lt;div class=&quot;tab_b&quot;&gt; 头部自定义内容 &lt;/div&gt;
     &lt;div class=&quot;tab_t&quot;&gt;选项卡一&lt;/div&gt;
     &lt;div class=&quot;tab_c&quot;&gt;
        选项卡一
     &lt;/div&gt;
     &lt;div class=&quot;tab_t&quot;&gt;选项卡二&lt;/div&gt;
     &lt;div class=&quot;tab_c&quot;&gt;
        选项卡二
     &lt;/div&gt;
     &lt;div class=&quot;tab_t&quot; ignore&gt;&lt;a href="http://baidu.com" target="_blank"&gt;忽略选显卡&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
                                </code>
                            </pre>
                            <pre>
                                <code>
  //js
  require('tab');
  $('.demo').tab();
                               </code>
                            </pre>
                        </td>
                    </tr>
                    <tr id="Tip（提示框）">
                        <td>tip</td>
                        <td>
                            <h5>描述</h5>
                            <p>提示框插件，语法：<code>
              $handle.tip($target,option);
            </code>，$target是被弹出内容，支持文本，html，jQuery元素（将清除默认样式）</p>
                            <h5>多终端</h5>
                            <p>支持</p>
                            <h5>配置</h5>
                            <table class="table table-hover">
                                <tr>
                                    <th>act</th>
                                    <td>默认‘mouseenter’，触发动作 mouseenter | click</td>
                                </tr>
                                <tr>
                                    <th>place</th>
                                    <td>弹出元素相对于$handle的显示位置，默认"left-center"，规则"第一轴向-第二轴向-[定位模式]"，第一轴向可选"left | right | top | bottom"，第二轴向除四个方位外还可以选择"center"，定位模式非必填，可选"in"，"in"定位模式表示$target将覆盖$handle</td>
                                </tr>
                                <tr>
                                    <th>title</th>
                                    <td>标题文字，默认false，不显示标题栏</td>
                                </tr>
                                <tr>
                                    <th>hasarr</th>
                                    <td>默认true，提示框有无箭头</td>
                                </tr>
                                <tr>
                                    <th>offset</th>
                                    <td>提示框与元素间距，默认0</td>
                                </tr>
                                <tr>
                                    <th>type</th>
                                    <td>默认'auto'，弹出文本内容自带边框，DOM元素不带边框，可选'content'，所有元素均自带边框弹出</td>
                                </tr>
                                <tr>
                                    <th>modal</th>
                                    <td>
                                        是否带半透明背景，默认false
                                    </td>
                                </tr>
                                <tr>
                                    <th>opacity</th>
                                    <td>
                                        模态背景透明度，默认0.5
                                    </td>
                                </tr>
                                <tr>
                                    <th>hook</th>
                                    <td>
                                        class钩子，将添加到弹出元素上，默认无
                                    </td>
                                </tr>
                                <tr>
                                    <th>show</th>
                                    <td>
                                        立即显示，默认false，若为true将忽略act事件，要用返回值中的hide()方法关闭
                                    </td>
                                </tr>
                                <tr>
                                    <th>onshow</th>
                                    <td>显示回调，接收当前对象为参数</td>
                                </tr>
                                <tr>
                                    <th>onhide</th>
                                    <td>关闭回调</td>
                                </tr>
                            </table>
                            <h5>返回值</h5>
                            <table class="table table-hover">
                                <tr>
                                    <th>obj.hide()</th>
                                    <td>关闭当前tip实例</td>
                                </tr>
                            </table>
                            <h5>示例</h5>
                            <pre>
                                <code>
  &lt;style&gt;
  /*css*/
  .demo a{margin: 60px;}
  &lt;/style&gt;
                                 </code>
                                 <code>
  &lt;!--html--&gt;
  &lt;div class=&quot;wrap demo&quot;&gt;
    &lt;a href=&quot;#1&quot; class=&quot;_tip1 btn btn-default&quot;&gt;左&lt;/a&gt;
    &lt;a href=&quot;#2&quot; class=&quot;_tip2 btn btn-default&quot;&gt;上&lt;/a&gt;
    &lt;a href=&quot;#3&quot; class=&quot;_tip3 btn btn-default&quot;&gt;右&lt;/a&gt;
    &lt;a href=&quot;#4&quot; class=&quot;_tip4 btn btn-default&quot;&gt;下&lt;/a&gt;
  &lt;/div&gt;          
                                </code>
                            </pre>
                            <pre>
                                <code>
  //js
  require('tip');
  $('.demo ._tip1').tip( Math.random );
  $('.demo ._tip2').tip( Math.random , {place:'top-center'});
  $('.demo ._tip3').tip( Math.random , {place:'right-center'});
  $('.demo ._tip4').tip( Math.random , {place:'bottom-center'});
                                </code>
                            </pre>
                        </td>
                    </tr>
                    <tr id="Zoom（图片放大镜）">
                        <td>zoom</td>
                        <td>
                            <h5>描述</h5>
                            <p>图片放大镜，大图尺寸自动获取。</p>
                            <h5>多终端</h5>
                            <p>不支持</p>
                            <h5>配置</h5>
                            <table class="table table-hover">
                                <tr>
                                    <th>zoomWidth</th>
                                    <td>大图窗口宽度，默认与目标对象同宽</td>
                                </tr>
                                <tr>
                                    <th>zoomHeight</th>
                                    <td>大图窗口高度，默认与目标对象同高</td>
                                </tr>
                                <tr>
                                    <th>zoomScale</th>
                                    <td>默认0，大图相对小图放大倍数（大于1有效）</td>
                                </tr>
                                <tr>
                                    <th>offset</th>
                                    <td>大图窗口与小图距离，默认10，单位px</td>
                                </tr>
                                <tr>
                                    <th>offsetTarget</th>
                                    <td>大图定位目标，默认无，将相对目标元素定位</td>
                                </tr>
                                <tr>
                                    <th>position</th>
                                    <td>大图相对小图方位，默认right</td>
                                </tr>
                                <tr>
                                    <th>animate</th>
                                    <td>默认true，大图是否渐显</td>
                                </tr>
                                <tr>
                                    <th>duration</th>
                                    <td>默认200，大图渐显动画时长</td>
                                </tr>
                                <tr>
                                    <th>preload</th>
                                    <td>默认true，预加载大图，小图动态切换的情况只对第一张有效</td>
                                </tr>
                            </table>
                            <h5>示例</h5>
                            <pre>
                                <code>
  &lt;!--html--&gt;
  &lt;style&gt;
  .demo{width:400px;height:320px;line-height: 320px; text-align:center;background:#eee;}
  .demo img{display: inline-block;vertical-align: middle;}
  &lt;/style&gt;
  &lt;div class=&quot;demo&quot;&gt;
     &lt;img src=&quot;http://temp.im/320x240/&quot; zoom=&quot;http://temp.im/640x480/&quot;  /&gt;
  &lt;/div&gt;
                                </code>
                            </pre>
                            <pre>
                                <code>
  // JS
  require('zoom');
  $('.demo').zoom()
                                </code>
                            </pre>
                        </td>
                    </tr>
        </table>
    </section>
    <section class="wrap" id="patch">
        <h2>解决方案</h2>

        <p>内置解决方法示例页面见项目<code>flow-ui/</code>。</p>
        <h3 id="f_b">前后端分离</h3>
        <p>前后端分离是系统工程，其中最基本要做到的两点，一是通过数据接口实现数据交互，二是约定交互的数据格式，使<code>view</code>层操作全部落在前端，即可从开发上实现前后端解耦</p>
        <p>框架默认提供一个<code>js/api.js</code>文件，即接口管理模块，业务代码中不再具体写死数据请求地址，而是通过该模块获取指定的api，约定前后端交互数据基本格式如下：</p>
        <pre>
            <code>
{
    "status": "Y",      //请求的状态 "Y"/"N"，也可以根据情况扩展其他
    "data": [{...}],    //请求的数据 数组或对象
    "msg": ""           //【可选】服务端提示信息
}
            </code>
        </pre>
        <p>典型用法如下：</p>
        <pre>
            <code>
//api.js
define(function(require, exports, module) {
    //开发模式
    var develop = true;
    // api管理
    var api = {
        login: develop ? '/test.login.json' : '/login'
    };

    module.exports = api;
});
            </code>
            <code>
//login.js
var api = require('js/api');
$.ajax({
    url: api.login,
    data:{
        ...
    },
    success:function(res){
        /* 后端返回
        {
            "status": "Y", 
            "data": {
                "location": "/view/login/"
            }
        } 
        */
        if(res.status==='Y'){
            if(res.data.location){
                window.location.href = res.data.location;
            }
        }
    }
})
            </code>
        </pre>
        <h3 id="CrossTerminal">多终端</h3>
        <p>多终端网站开发除了css媒体查询以外，至少还要具备三项功能：响应式栅格系统、终端识别，响应图片。</p>
        <p>响应式栅格系统使页面布局可以随终端自动调整；</p>
        <p>终端识别使js可以为每个终端做单独处理，框架通过媒体查询在页面中埋下特殊标记，js通过查找标记分辨当前设备类型，终端识别方法内置在responsive.js中；</p>
        <p>响应图片使移动设备可以使用单独定制的小尺寸图片，为加载提速，对应方法已封装在responsive.js中。</p>
        <p>默认多终端项目模板的实现方案是：</p>
        <code>
 {Pc} > 1024 > {Pad} > 640 > {Mobile} 
       </code>
        <h3 id="mobileFixed">移动端屏幕适配</h3>
        <p>约定设计稿宽度：手机界面640px，pad界面1024px。</p>
        <p>基于以上约定，通过vw单位<strong>将html字号（rem）设置为100px</strong>，因为vw单位的特性，使rem对屏幕宽度具有适应性，凡是使用rem为单位的尺寸/字号都将随屏幕宽度自动缩放，例如：</p>
        <pre>
     <code>
  &lt;style&gt;
    .test{width: 3.2rem;height:3.2rem;background:yellow;}
  &lt;/style&gt;
  &lt;div class=&quot;test&quot;&gt;
    &lt;p&gt;在任何手机上都显示为宽度50%（3.2rem）的正方形&lt;/p&gt;
    &lt;p style=&quot;font-size:.28rem&quot;&gt;字号.28rem的文字&lt;/p&gt;
  &lt;/div&gt;
     </code>
   </pre>
        <h3 id="fullpage">全屏翻页</h3>
        <p>全屏翻页(fullpage)模式的简单实现。</p>
        <h3 id="DemandRendering">按需渲染</h3>
        <h4>延迟显示</h4>
        <p><code>.opc0</code>将使元素透明，documentReady后显示，用于隐藏局部或整个页面的渲染过程</p>
        <pre>
     <code>
       &lt;div class=&quot;opc0&quot;&gt;
        这里的内容会在documentReady后显示
       &lt;/div&gt;
     </code>
   </pre>
        <h4>延迟渲染</h4>
        <p>见<a href="#Responsive（响应式工具）">responsive.js</a>中的topush()方法介绍。</p>
        <h4>内置按需渲染策略</h4>
        <p>见<a href="#Responsive（响应式工具）">responsive.js</a>scanpush()方法介绍。</p>
        <h3 id="instantclick">链接预加载</h3>
        <p>结合<a href="https://github.com/tower1229/seajs-modules" target="_blank">seajs-modules</a>提供的<a href="http://instantclick.io" target="_blank">instantclick</a>插件，实现链接预加载、无刷新切换（PJAX）、加载进度条等特性，并扩展了页面切换后记住滚动位置的功能。</p>
        <h4>使用</h4>
        <p>预加载技术有一定特殊性，普通模块加载方式将失效，需要使用优化后的pjax专用模板，开发中基本保持了原有模块化开发体验，主要存在以下三点细节上的不同：</p>
        <h5>区别1：页面底部引用js时增加回调并执行返回函数（使用者无需关心）</h5>
        <pre>
          <code>
          //页面引用js的写法
          seajs.use('js/index_pjax', function(run) {
            run();
          })
          </code>
        </pre>
        <h5>区别2：在页面js的返回函数里写业务代码（使用者无需关心）</h5>
        <pre>
      <code>
  define(function(require) {
    var $ = require('jquery');
    var base = require('base');
    var com = require('./common_pjax'); //注意这里必须引用common_pjax
    //模块js的写法
    return function(){ 
      //页面代码里执行common_pjax
      com.init(); 
      //以下就是你得业务代码啦
      require('box'); 
      $.box.msg('hello p1!');

    }
  })
      </code>
    </pre>
        <h5>区别3：原来common.js里的码要写在common_pjax.js的init方法里，这里需要注意一下，common.js修改往往比较多</h5>
        <pre>
      <code>
  //common_pjax
  module.exports = {
      init:function(){
        //整站通用代码
        ...
      }
  }
      </code>
    </pre>
        <h4>其他小问题：</h4>
        <p>页面中所有的资源路径（包括图片）必须是绝对路径，因为相对路径全部是相对于着陆页而言的，当跳转路径跨层级时相对路径会报错。</p>
        <p>PJAX切换模式还会导致某些插件表现异常，本质上都是因为页面没有刷新，比如mmenu.js点击后不收回，需要添加如下配置：<code> { onClick:{ close:true}}</code></p>
        <h5>黑名单</h5>
        <p>这几种情况下的a标签不会触发预加载和pjax切换：</p>
        <ol>
            <li>具有<code>target</code>或<code>download</code>或<code>data-no-instant</code>属性；</li>
            <li>指向不同的域；</li>
            <li>指向"#"或"#"开头的地址</li>
        </ol>
        <h5>记住滚动位置</h5>
        <p>当href地址中含有<code>scrollfixed</code>参数时，切换后会记住当前的页面滚动位置：</p>
        <pre>
      <code>
  &lt;a href=&quot;/test/test.html?scrollfixed=1&quot;&gt;
      </code>
    </pre>
        <h3 id="ajaxcombo">AJAX合并</h3>
       <h5>base.ajaxCombo(option)</h5>
       <p>合并ajax请求，设置<code>combo:true</code>$.ajax会被合并，集中以<code>post</code>方式发送到指定url。</p>
        <pre>
          <code>
  /*
  * option.comboUrl[string]: 合并请求的发送地址，默认"/test/combo.php"
  * option.comboDataKey[string]: 发送合并数据的key，默认"paramArray"
  * option.extendData[object]: 合并请求的附加参数，将与option.comboDataKey平级，默认{}
  * option.duration[number]: 合并等待时间，单位ms，该时间段内连续发起的请求会被合并，默认16
  * option.everytimeout[number]: 单个请求超时时间，单位ms，默认2000，合并请求达到总超时时间后会终止，并将原ajax重新发起。
  */

  //发送数据格式示例，数据以"combo1、combo2..."的规则组织：
  {
    "paramArray": {
      "combo1": {
        "url": "",
        "data": ""
      },
      "combo2": {
        "url": "",
        "data": ""
      }
    }
  }
  //返回数据格式示例，数据按原paramArray的结构返回：
  {
    "combo1": {
      "data": "返回数据"
    },
    "combo2": {
      "data": "返回数据"
    }
  }

        </code>
      </pre>
      <p>复制以下代码到页面js中，打开页面调试面板查看网络请求和控制台。</p>
      <pre>
        <code>
  //调用并附加参数:  
  base.ajaxCombo({
    extendData: {
      apikey: 'apikey',
      token: 'token',
      secretKey: 'secretKey'
    }
  });
  //第一批次合并请求
  $.ajax({
    url: seajs.root + '/test/ajax.php',
    data: {
      test: 'hello1',
      sign: 's1'
    },
    combo: true,
    success: function(data) {
      console.log('第一批ajax1返回')
    }
  });
  $.ajax({
    type: 'post',
    url: seajs.root + '/test/ajax.php',
    data: {
      test: 'hello2',
      sign: 's2'
    },
    combo: true,
    success: function(data) {
      console.log('第一批ajax2返回')
    }
  });
  //第二批次合并请求
  setTimeout(function() {
    $.ajax({
      url: seajs.root + '/test/ajax.php',
      data: {
        test: 'hello3',
        sign: 's3'
      },
      combo: true,
      success: function(data) {
        console.log('第二批ajax1返回')
      }
    });
    $.ajax({
      type: 'post',
      url: seajs.root + '/test/ajax.php',
      data: {
        test: 'hello4'
      },
      combo: true,
      success: function(data) {
        console.log('第二批ajax2返回')
      }
    });
  }, 300);
  //不参与合并的请求
  $.ajax({
    url: seajs.root + '/test/ajax.php',
    data: {
      test: '普通未合并ajax'
    },
    success: function(data) {
      console.log(data)
    }
  });
          </code>
        </pre>
        <h3 id="jscatch">js模块本地缓存</h3>
        <p>使用seajs-localcache插件实现manifest功能，通过manifest.js控制各模块版本（已合并至<code>/lib/seajs.js</code>），公用模块在第一次请求后会缓存到localstorage中，默认版本号1，修改版本号即更新对应模块缓存，版本号必须是真值（非0）。</p>
        <pre>
            <code>
  /*
  * manifest.js
  */
  define('manifest',function(){
    var mod = {
        'album/album'                   : 1,  //修改版本号更新对应的插件缓存
        'hook/hook'                     : 1,
        'jquery/1/jquery'               : 1,
        'jquery/2/jquery'               : 1,
        'My97DatePicker/WdatePicker'    : 1
        //...
        }
    //...
  })
         </code>
       </pre>
    </section>
    <footer class="wrap oh tc">
   <div class="row "> <a href="#" title="返回顶部" class="dib foot_logo gotop">
	   <figure></figure>
	</a>
	<p class="dib"> © 2016 - 3016  tower1229@gmail.com<br>
	Acknowledgements : seajs \ bootstrap \ foundation \ ... </p>
	</div>
</footer>
    <script src="/Flow-UI/docs/lib/sea.js" id="seajsnode"></script>
    <script>
    seajs.use('js/doc');
    </script>
</body>

</html>
